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中bind与live的用法及区别小结
Jan 27 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
php实现cookie加密的方法
2015/03/10 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
Python制作简易注册登录系统
2016/12/15 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
django框架模板语言使用方法详解
2019/07/18 Python
银行会计财务工作个人的自我评价
2013/10/29 职场文书
四风存在的原因分析
2014/02/11 职场文书
2014年公司迎新年活动方案
2014/02/24 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
植树节口号
2014/06/21 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
教师工作表现自我评价
2015/03/05 职场文书
建国大业电影观后感
2015/06/01 职场文书
老干部座谈会主持词
2015/07/03 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书