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 相关文章推荐
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
学习vue.js条件渲染
Dec 03 Javascript
vue组件间通信解析
Mar 01 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
微信小程序上传图片实例
May 28 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 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教程孙仲岳主讲
2008/01/07 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python函数装饰器用法实例详解
2015/06/04 Python
Python爬取附近餐馆信息代码示例
2017/12/09 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
新学期校长寄语
2014/01/18 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
小学生美德少年事迹
2014/02/02 职场文书
物业管理专业自荐信
2014/07/01 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
实践论读书笔记
2015/06/29 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python