<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            position:relative;

            text-align: center;

            background:#212322;

        }

        h1{

            color:#1A897A;

            font-family: "Palatino Linotype";

            font-size: 60px;

            margin:40px;

            text-shadow: 2px 2px 0 #183e2b;

        }

        #demo-box{

            width:550px;

            margin:40px auto;

            padding:40px 40px 20px;

            background:#c7e1d5;

            border-radius: 12px;

            overflow: hidden;

        }

        .button{

            float:left;

            margin-bottom:30px;

        }

        #info-box{

            clear:left;

            padding:20px 20px 10px;

            background:#abd5c1;

            border-radius: 10px;

        }

        p{

            margin:0 0 1.2em;

            color:#333333;

            font-family: Arial;

            font-size: 13px;

            line-height: 1.3em;

        }

        #eg1{

            background:url(img/background.png) no-repeat center -105px;

            display: block;

            width:5em;

            padding:30px 40px;

            text-align: center;

            font-family: Arial;

            font-size: 18px;

            color:#fff;

            text-decoration:none;

            text-shadow: 1px 1px 0 #000;

            border-radius:25px;

            background:url(img/linear-gradient.png) no-repeat 0px -400px,url(img/background.png) no-repeat center -8px;

            box-shadow: 2px 2px 10px #000;

            transition:all 1s ease;

        }

        #eg1:hover{

            background:url(img/background.png) no-repeat center -5px;

            background:url(img/linear-gradient.png) no-repeat 0px 0px,url(img/background.png) no-repeat center -8px;

        }

        #eg2{

            background: url(img/background.png) no-repeat center -105px;    /* Fallback */

            display: block;

            width: 5em;

            margin: 0px 20px;

            padding: 30px 40px;

            text-align: center;

            font-family: Arial, sans-serif;

            font-size: 18px;

            color: #fff;

            text-decoration: none;

            text-shadow: 1px 1px 0px #000;

            border-radius: 25px;

            background: url(img/stripes.png) no-repeat 0px 0px, url(img/background.png) no-repeat center -8px;

            box-shadow: 2px 2px 10px #000;

            transition: all 1s ease-out;

        }

        #eg2:hover {

            background: url(img/background.png) no-repeat center -5px;

            background: url(img/stripes.png) no-repeat 0px -200px, url(img/background.png) no-repeat center -8px;

            transition: all 0.5s ease;

        }

        #eg3 {

            background: url(img/background.png) no-repeat center -105px;

            display: block;

            width: 5em;

            padding: 30px 40px;

            text-align: center;

            font-family: Arial, sans-serif;

            font-size: 18px;

            color: #fff;

            text-decoration: none;

            text-shadow: 1px 1px 0px #000;

            border-radius: 25px;

            background: url(img/radial-gradient.png) no-repeat center center, url(img/background.png) no-repeat center -8px;

            box-shadow: 2px 2px 10px #000;

            background-size: 200px 200px, 180px 200px;

            transition: all 0.75s ease;

        }

        #eg3:hover {

            background: url(img/background.png) no-repeat center -5px;

            background: url(img/radial-gradient.png) no-repeat center center, url(img/background.png) no-repeat center -8px;

            background-size: 1000px 1000px, 180px 200px;

            transition: all 1s ease;

        }

    </style>

</head>

<body>

    <h1>CSS3动画暗角按钮</h1>

    <div id="demo-box">

        <a id="eg1" class="button" href="#">Fade In</a>

        <a id="eg2" class="button" href="#">Peer Thro'</a>

        <a id="eg3" class="button" href="#">Iris</a>

        <div id="info-box">

            <p>These buttons are made by styling a single anchor element with CSS3 multiple backgrounds. They use two img - a background pattern and then a semi-transparent .png 'vignette' which sits over the top. The vignette position or size is then animated using the transition property in Chrome, Safari and Firefox 4.

            <p>They fallback nicely in browsers that don't fully support the CSS3 properties in use.</p>

            <p>For more info check out the source or this accompanying article.</p>

        </div>

    </div>

</body>

</html>

[CSS3] 动画暗角按钮的更多相关文章

  1. CSS3动画之按钮抖动

    今天要分享一组代码,当鼠标悬停在按钮上时.按钮抖动!!! <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  3. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  4. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  5. 9款精美别致的CSS3菜单和按钮

    1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...

  6. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  7. jQuery插件css3动画模拟confirm弹窗

    相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...

  8. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  9. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

随机推荐

  1. Java Web 从入门到精通（明日科技）

    目录结构: 第一章:Java Web 应用开发概述 第二章:html与css网页开发基础 第三章:JavaScript脚本语言 第四章:搭建开发环境 第五章:JSP语言基础 第六章:JSP内置对象 第 ...

  2. 输入输出参数 inout

    输入输出参数 inout 函数参数默认是常量.试图在函数体中更改参数值将会导致编译错误(compile-time error).这意味着你不能错误地更改参数值.如果你想要一个函数可以修改参数的值,并且 ...

  3. RabbitMQ学习在windows下安装配置

    RabbitMQ学习一. 在windows下安装配置 1.下载并安装erlang,http://www.erlang.org/download.html,最新版是R15B01(5.9.1).由于我机器 ...

  4. mysql查询赋值、修改拼接字符串

    sql中修改字符串类型的字段可以这么拼接:update tbName set UserName='abc'+UserName; 但mysql中就不行了,需要这样:update tbName set U ...

  5. yii 关于如何改变默认访问的控制器(site)

    以前Yii1学了个皮毛就没去管了,现在想重新捡起来Yii2.0.2却出来了,于是搭建好环境来学习. 安装好Yii2后第一个想到的问题就是修改默认的控制器了. 按照网上所说,终于在/vendor/yii ...

  6. centos6.5下使用yum完美搭建LNMP环境(php5.6)

    准备工作 配置防火墙,开启80端口.3306端口删除原有的 iptables , 添加合适的配置 rm -rf /etc/sysconfig/iptables vi /etc/sysconfig/ip ...

  7. 不同包之间的继承extends

    情景如下: 两个类:ExtendsSuper(父类).ExtendsSub(子类) 两个包:父类ExtendsSuper位于包packSuper路径下,子类ExtendsSub位于包packSub路径 ...

  8. Linux select/poll和epoll实现机制对比

    关于这个话题,网上已经介绍的比较多,这里只是以流程图形式做一个简单明了的对比,方便区分. 一.select/poll实现机制 特点: 1.select/poll每次都需要重复传递全部的监听fd进来,涉 ...

  9. 安装bcmath 扩展

    1.在php源码包中,默认就包含bcmath扩展的安装文件,只需手动安装一下即可 cd /root/build2/php-/ext/bcmath // 进入PHP的源码包目录中的bcmatch扩展目录 ...

  10. 中介者模式c#（媒婆版）

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace 中介者模式{  ...