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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
8 个有用的JS技巧(推荐)
Jul 03 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
PHP中的日期处理方法集锦
2007/01/02 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JS跨域总结
2012/08/30 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
2018/09/14 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
Python 如何实现访问者模式
2020/07/28 Python
python实现画图工具
2020/08/27 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
甲乙双方合作协议书
2014/10/13 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
武侯祠导游词
2015/02/04 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
python数字转对应中文的方法总结
2021/08/02 Python