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. 李洪强iOS开发之RunLoop的原理和核心机制

    李洪强iOS开发之RunLoop的原理和核心机制 搞iOS之后一直没有深入研究过RunLoop,非常的惭愧.刚好前一阵子负责性能优化项目,需要利用RunLoop做性能优化和性能检测,趁着这个机会深入研 ...

  3. 我们工作到底为了什么 （HP大中华区总裁孙振耀退休感言）

    我们工作到底为了什么 (HP大中华区总裁孙振耀退休感言) 一.关于工作与生活    我有个有趣的观察,外企公司多的是25-35岁的白领,40岁以上的员工很少,二三十岁的外企员工是意气风发的,但外企公司 ...

  4. IOS 字典模型互转框架 MJExtension

    IOS 字典模型互转框架 MJExtension   能做什么? MJExtension是一套字典和模型之间互相转换的超轻量级框架 MJExtension能完成的功能 字典(JSON) -->  ...

  5. Wiz笔记发布博客工具无法获取分类修复

    使用Wiz笔记可以很方便的将笔记发布到博客,而且支持markdwon书写,并且可以很方便的通过复制粘贴来插入图片. 用法:http://blog.wiz.cn/wiz-plugin-blog-writ ...

  6. 程序员的vim

    1,所有的Unix like系统都会内建vi文书编辑器,其他的文书编辑器则不一定会存在,但是目前我们使用比较多的是vim编辑器 vim具有程序编辑的能力,可以主动的以字体颜色辨别语法的正确性,方便程序 ...

  7. 记录下docker的常用命令

    常用命令: docker images:查看本地所有镜像 docker pull  centos:7:从仓库中获取镜像 docker ps:列出所有正在运行的容器 docker ps -a:列出所有容 ...

  8. Ubuntu上配置Eclipse：安装CDT【转】

    本文转载自:http://www.linuxdiyf.com/linux/23519.html 在最新的 Ubuntu Kylin 16.04 中安装了eclipse,在纠结了很久的网络问题之后,开始 ...

  9. bzoj2323: [ZJOI2011]细胞

    这题真神... 首先看到这么花里胡哨的题面眉头一皱就发现这个球的大小是搞笑的不然就没法做了,有用的是最终拆出来的长度 然后对于一段长度为n有n-1个丝状物的东西,写一个DP:f[i][2]表示枚举到第 ...

  10. ModelAndView存取数Model、Map、ModelMap

    1.从名字上看ModelAndView中的Model代表模型,View代表视图,这个名字就很好地解释了该类的作用.(对应mvc配置,寻找模型,返回视图.) 2.业务处理器调用模型层处理完用户请求后,把 ...