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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
详解jQuery中的事件
Dec 14 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
Javascript中Eval函数的使用说明
2008/10/11 Javascript
JavaScript 数组详解
2013/10/10 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python logging设置level失败的解决方法
2020/02/19 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
人事主管的岗位职责
2013/11/16 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
IT工程师岗位职责
2014/07/04 职场文书
邀请函模板
2015/02/02 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
如何用python反转图片,视频
2021/04/24 Python