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. VTMagic的使用

    // VTMagic的使用 //  CFOrderViewController.m //  qifuyuniOS //// /** *  @author 李洪强, 16-08-30 10:08:50 ...

  2. vmware10上安装mac os 10.9

    来源地址:http://dtbuluo.com/blog/archives/350 序言: 前几天跟朋友开玩笑说,要不我们一起来学习一下swift编程语言吧~我们就抱着玩玩的态度,没有想过要做出什么优 ...

  3. [他山之石]Google's Project Oxygen Pumps Fresh Air Into Management

    The Project Oxygen team spent one year data-mining performance appraisals, employee surveys, nominat ...

  4. Linux上ln命令详细说明及软链接和硬链接的区别

    硬链接(hard link) UNIX文件系统提供了一种将不同文件链接至同一个文件的机制,我们称这种机制为链接.它可以使得单个程序对同一文件使用不同的名字.这样的好处是文件系 统只存在一个文件的副本, ...

  5. ACTION 中 单表查询语句 SQL写法

    JSP页面 <tr> <td class="STYLE1"> <div align="center"> // 单击事件 调用 ...

  6. 【Selenium】软件测试基础（软件测试分类和工具组）firebug、firepath的安装

    白盒测试:需要了解内部结构和代码 黑盒测试:不关心内部结构和代码 灰盒测试:介于白盒黑盒之间 静态测试:测试时不执行被测试软件 动态测试:测试时执行被测试软件 单元测试:测试软件的单元模块 集成测试: ...

  7. BZOJ_3172_[Tjoi2013]单词_AC自动机

    BZOJ_3172_[Tjoi2013]单词_AC自动机 Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. ...

  8. U-Boot编译过程完全分析

    2.1       U-Boot Makefile分析 2.1.1             U-Boot编译命令 对于mini2440开发板,编译U-Boot需要执行如下的命令: $  make  m ...

  9. LR：HTML-based script和URL-based script方式录制的区别

    转http://www.cnblogs.com/xiaojinniu425/p/6275257.html 一.区别: 为了更加直观的区别这两种录制方式,我们可以分别使用这两种方式录制同一场景(打开百度 ...

  10. css content

    before after demo 1 添加描述信息 div1:after{conent:"天假额外的文字"} 2 也可以显示元素的某些属性 <a class="d ...