CSS3实现动态背景登录框的代码


Posted in Javascript onJuly 28, 2015

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下:

CSS3实现动态背景登录框的代码

实现的代码如下:

html代码:

<div class="htmleaf-container">
    <div class="wrapper">
      <div class="container">
        <h1>Welcome</h1>

        <form class="form">
          <input type="text" placeholder="Username">
          <input type="password" placeholder="Password">
          <button type="submit" id="login-button">Login</button>
        </form>
      </div>

      <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>

  <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script>
    $('#login-button').click(function (event) {
      event.preventDefault();
      $('form').fadeOut(500);
      $('.wrapper').addClass('form-success');
    });
  </script>

本文介绍的这款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效,希望大家可以喜欢。

Javascript 相关文章推荐
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
论JavaScript模块化编程
Mar 07 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 #Javascript
详解JavaScript ES6中的模板字符串
Jul 28 #Javascript
javascript解决IE6下hover问题的方法
Jul 28 #Javascript
JavaScript如何自定义trim方法
Jul 28 #Javascript
详解JavaScript ES6中的Generator
Jul 28 #Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 #Javascript
JavaScript调用客户端Java程序的方法
Jul 27 #Javascript
You might like
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
js loading加载效果实现代码
2009/11/24 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python时间获取及转换知识汇总
2017/01/11 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
如何理解python面向对象编程
2020/06/01 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
幼儿园六一亲子活动方案
2014/08/26 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
邀请函模板
2015/02/02 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书