<!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. Python与Go快速排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 快速排序 # 时间复杂度 O(n lgn)-- O(n^2) def quick_sort(array) ...

  2. SIEBEL GET最新时提示表异常

    无法GET最新,则将此表GET一次,CHECK OUT下来,再UNDO CHECK IN即可

  3. 寻找hash值——把int array看成是一个整数

    QUESTION: Write a class DominoChecker that has a method called addBox(int[]) that takes a box of fiv ...

  4. 大楼轮廓 · building-outline

    ［抄题］: 水平面上有 N 座大楼,每座大楼都是矩阵的形状,可以用一个三元组表示 (start, end, height),分别代表其在x轴上的起点,终点和高度.大楼之间从远处看可能会重叠,求出 N  ...

  5. Add Strings大整数加法十进制求和 & Add Binary二进制求和

    ［抄题］: 以字符串的形式给出两个非负整数 num1 和 num2,返回 num1和 num2 的和. 比如一个50位+一个100位. 给定 num1 = "123",num2 = ...

  6. php通过反射执行某方法

    简单记录下通过反射来获取某方法的参数,然后利用php内置函数类执行此方法 一个简单的test类 class test { //2个参数默认值 public function b($name='lemo ...

  7. C++ std::thread

    std::thread Defined in header class thread The class thread represents a single thread of execution. ...

  8. How to Restart Qt Application

    How to restart QtApplication As we know, Restarting Application means to exit current application, t ...

  9. cmake 查看配置选项

    cmake 查看配置选项可以用如下命令 cmake . -LH 查看help > cmake -h    cmake version 2.6-patch 4 Usage cmake [optio ...

  10. Spring JMX之二：远程访问MBean

    虽然最初的JMX规范提及了通过MBean进行应用的远程管理,但是它并没有定义实际的远程 访问协议或API.因此,会由JMX供应商定义自己的JMX远程访问解决方案,但这通常又是专 有的. 为了满足以标准 ...