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. 链接脚本在编程中的高级运用之二——执行时库和C++特性支持

    我们在链接脚本在编程中的高级运用之中的一个可变长数组中已经讲述了编译链接的原理,并且以uboot命令为例具体介绍链接脚本怎样实现可变长数组. 本章在前者的基础上继续讲述链接脚本在执行时库中的高级应用技 ...

  2. 修改linux环境变量配置文件

    发现error ImportError: dynamic module does not define module export function (PyInit_cv_bridge_boost) ...

  3. 大话设计模式C++实现-第14章-观察者模式

    一.UML图 关键词:Subject维护一个Observer列表.Subject运行Notify()时就运行列表中的每一个Observer的Update(). 二.概念 观察者模式:定义了一种一对多的 ...

  4. Memcache存储大数据的问题（大于1m）

    Memcached存储单个item最大数据是在1MB内,如果数据超过1M,存取set和get是都是返回false,而且引起性能的问题. 我们之前对排行榜的数据进行缓存,由于排行榜在我们所有sql se ...

  5. bzoj1007 [HNOI2008]水平可见直线——单调栈

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1007 可以把直线按斜率从小到大排序,用单调栈维护,判断新直线与栈顶的交点和栈顶与它之前直线的 ...

  6. APACHE2 服务器配置 （二） 默认端口***

    如将默认的80端口修改为9000 不管怎样,只要你选择合适的端口(电信商没有封的),进行如下的设置即可: 1, 修改 /etc/apache2/ports.conf 将 NameVirtualHost ...

  7. postgresql数据库基本信息查看

    切换至postgresql数据库用户pguser 或 postgres(根据自己实际情况) 1.   SELECT version(); 2.对的 2. 查看数据库大小: SELECT pg_size ...

  8. 工作日记：C#获取操作系统、MAC地址、登录用户、网卡、物理内存信息

    /// <summary> /// 操作系统的登录用户名 /// </summary> /// <returns>系统的登录用户名</returns> ...

  9. node.js在读取文件时中文乱码问题

    断更很久了........从今天开始会努力的持续更博,积极学习. 言归正传.今天在写node.js的demo时发现一个bug.我在node中读取本地的text文件时,发现英文的内容可以被读取,但是中文 ...

  10. Linux 常用命令十二 top

    一.top命令 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. top显示系统当前的进程和其他状况,是一个动态显示过程,即可以 ...