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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
javascript静态的url如何传递
May 03 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
phpmyadmin的#1251问题
2006/11/25 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
flask session组件的使用示例
2018/12/25 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
公积金转移接收函
2014/01/11 职场文书
初中政治教学反思
2014/01/17 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
大专毕业生求职信
2014/07/05 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
详解Python flask的前后端交互
2022/03/31 Python