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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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/03/20 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript计时器详解
2015/02/28 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
window下eclipse安装python插件教程
2017/04/24 Python
windows下python连接oracle数据库
2017/06/07 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python调用百度语音REST API
2018/08/30 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
外科实习自我鉴定
2013/10/06 职场文书
初三化学教学反思
2014/01/23 职场文书
自主招生推荐信范文
2014/05/10 职场文书
政协委员个人总结
2015/03/03 职场文书
2016学习雷锋精神活动倡议书
2015/04/27 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android