发布于 2017-07-11 16:28:00 | 26 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

CSS3 层叠样式表

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。


本文介绍了一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效,需要的朋友可以参考下

基于CSS3动态背景登录框代码。这是一款基于jQuery+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实现的带有动画效果的动态背景登陆框特效,希望大家可以喜欢。



相关阅读 :
CSS3实现动态背景登录框的代码
CSS3进阶:酷炫的3D旋转透视
CSS3新属性:在网站中使用访客电脑里没有安装的字体
【CSS3】响应式布局的实际应用的小例子
CSS3原生支持div铺满浏览器的方法
神通广大的CSS3选择器
理解CSS3中的background-size(对响应性图片等比例缩放)
简单了解CSS3的all属性
CSS3新特性简介
border-radius 样式表CSS3圆角属性
prefix css3漏斗Loading加载动画
CSS3 3D 行星运转动画 + 浏览器渲染原理
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务