1. 实例

2.HTML 代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3-Fade</title>

    <link rel="stylesheet" type="text/css" href="./fade.css">

</head>

<body>

    <div class="container">

        <div class="fade fade-in">

            fade-in

        </div>

        <div class="fade fade-top">

            fade-top

        </div>

        <div class="fade fade-bottom">

            fade-bottom

        </div>

        <div class="fade fade-left">

            fade-left

        </div>

        <div class="fade fade-right">

            fade-right

        </div>

        <div class="fade bounce-top">

            bounce-top

        </div>

        <div class="fade bounce-bottom">

            bounce-bottom

        </div>

        <div class="fade bounce-left">

            bounce-left

        </div>

        <div class="fade bounce-right">

            bounce-right

        </div>

        <div class="fade fade-center-out">

            fade-center-out

        </div>

        <div class="fade fade-center-in">

            fade-center-in

        </div>

        <div class="fade fade-middle-out">

            fade-middle-out

        </div>

        <div class="fade fade-middle-in">

            fade-middle-in

        </div>

    </div>

</body>

</html>

3.CSS 代码

*{

    padding:;

    margin:;

}

html{

    background: -webkit-radial-gradient(#222222, #000000);

    background: radial-gradient(#222222, #000000);

    height: 100%;

    text-align: center;

    width:100%;

}

.container{

    width: 800px;

    margin: 200px auto;

    text-align: left;

}

.fade{

    cursor: pointer;

    box-sizing: border-box;

    display: inline-block;

    color: #09f;

    background: white;

    padding: 10px 20px;

    text-align: center;

    margin: 10px 0;

    /* 设置相对定位 */

    position: relative;

    transition: all 0.3s;

    /* 设置层次 会被before after在上面 */

    z-index:;

}

.fade:hover{

    color: white;

}

/* 其实使用背景颜色变化就可以的 但是这里为了做统一*/

.fade:before,.fade:after

{

    display: block;

    transition: all 0.3s;

    background: #09f;

    position: absolute;

    content: '';

    z-index: -1;

}

.fade-left:before,.fade-right:before,

.fade-center-out:before,.fade-center-out:after,

.fade-center-in:before,.fade-center-in:after,

.bounce-left:before,.bounce-right:before

{

    height: 100%;

    top:;

    width:;

}

.fade-middle-out:before,.fade-middle-out:after,

.fade-middle-in:before,.fade-middle-in:after,

.bounce-bottom:before

{

    height:;

    width: 100%;

    left:;

}

/* 弹跳元素设置时间线 使用三次贝塞尔曲线 */

.bounce-top:before,.bounce-bottom:before,

.bounce-left:before,.bounce-right:before{

    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);

}

.fade-in:before{

    height: 100%;

    width: 100%;

    opacity:;

    top:;

    left:;

}

.fade-bottom:before, .fade-top:before,.bounce-top:before{

    height:;

    width: 100%;

    left:;

}

.fade-top:before,.bounce-top:before,.fade-middle-out:before{

    top:;

}

.fade-bottom:before,.fade-middle-out:after,.bounce-bottom:before{

    bottom:;

}

.fade-left:before,.fade-center-in:before,.bounce-left:before{

    left:;

}

.fade-right:before,.fade-center-in:after,.bounce-right:before{

    right:;

}

.fade-center-out:before{

    right: 50%

}

.fade-center-out:after{

    left: 50%

}

.fade-middle-in:before{

    bottom:50%;

}

.fade-middle-in:after{

    top:50%;

}

.fade-in:hover:before{

    opacity:;

}

.fade-left:hover:before,.fade-right:hover:before,

.bounce-left:hover:before,.bounce-right:hover:before

{

    width: 100%;

}

.fade-top:hover:before,.fade-bottom:hover:before,

.bounce-top:hover:before,.bounce-bottom:hover:before{

    height: 100%;

}

.fade-center-out:hover:before,.fade-center-out:hover:after,

.fade-center-in:hover:before,.fade-center-in:hover:after{

    width:50%;

}

.fade-middle-out:hover:before,.fade-middle-out:hover:after,

.fade-middle-in:hover:before,.fade-middle-in:hover:after

{

    height:50%;

}

4. 练习

区别只是 heigth属性所设置的高度大小

CSS3 按钮特效(一)的更多相关文章

  1. 神奇的CSS3按钮特效

    点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...

  2. 10款CSS3按钮 - 程序员再也不用为按钮设计而发愁了...

    这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按 ...

  3. 10款CSS3按钮 - 再也不用为按钮设计而发愁了

    这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按 ...

  4. 7款外观迷人的HTML5/CSS3 3D按钮特效

    1.CSS3超酷3D弹性按钮 按钮实现非常简单 今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有弹性的动画特效,非常可爱. 在线演 ...

  5. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  6. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

  7. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  8. css3 javascript 实现菜单按钮特效

    一个菜单按钮特效案例,简单的实现了动态效果. 代码效果预览地址: http://code.w3ctech.com/detail/2504 <div class="bar" i ...

  9. 5种漂亮的纯CSS3动画按钮特效

    这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...

随机推荐

  1. Android开发之自己定义Spinner样式的效果实现（源码实现）

    android系统自带的Spinner样式是远远满足不了我们实际开发过程中对Spinner UI风格的要求,因此我们肯定须要为了切合整个应用的风格,改动我们的Spinner样式.系统给我们提供了两种常 ...

  2. Android Client and PHP Server

    1 FEApplication https://github.com/eltld/FEApplication https://github.com/eltld/FE-web https://githu ...

  3. scikit-learn：class and function reference（看看你究竟掌握了多少。。）

    http://scikit-learn.org/stable/modules/classes.html#module-sklearn.decomposition Reference This is t ...

  4. 递归读取制定目录下所有文件夹和文件的实现（java）

    public static String getAllDirectorisAndFiles(String path){ Map<String, Object> responseMap = ...

  5. mysql10---索引优化

    D:\MYSQL\mysql-winx64\data\WIN-20171216YUR-slow.log是慢日志: ; ; # Time: :.472000Z # # Query_time: Rows_ ...

  6. VMware克隆虚拟机后网络配置

    修复克隆虚拟机文件 # vi /etc/udev/rules.d/70-persistent-net.rules # PCI device 0x8086:0x100f (e1000) SUBSYSTE ...

  7. gdb core调试

    原文链接 http://blog.163.com/lanka83/blog/static/32637615200801793020182/http://blog.csdn.net/taina2008/ ...

  8. bzoj3160

    fft+manacher fft都快忘了... 其实我们发现,这个问题是可以用fft做的,因为是回文子序列,所以我们直接自己和自己求卷积,然后扫描每个位置,注意是每个位置,因为包括奇数长度和偶数长度, ...

  9. UI：数据的解析XML与JSON

    XML  和  JSON 语言  本篇博客来自互联网参考 XML 和 JSON 的互相转化 有属性的转化为对象,无属性的转化为字符串 节点的顺序性不可逆,XML有顺序,JSON 无顺序 XML 和 J ...

  10. EF include 预先加载

    在asp.net mvc 中,常在控制器中预先加载导航属性,以便在视图中能够显示起关联的数据. 如果不预先加载,View中就会无法呈现外键的 关联数据. 会提示EF 错误发生. 一. 模型: publ ...