<!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实例、类方法、静态方法

    [python实例.类方法.静态方法] 参考:http://blog.163.com/yang_jianli/blog/static/161990006201122411586729/

  2. 9.Palindrome Number (INT)

    Determine whether an integer is a palindrome. Do this without extra space. class Solution { public: ...

  3. 26.Remove Duplicates from Sorted Array(Array)

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  4. was not registered for synchronization because synchronization is not active

    报SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@7862f70e] was not registered for s ...

  5. change qt version

    https://blog.csdn.net/xiaoheibaqi/article/details/50777203 右键工程->设置qt project setting -->修改ver ...

  6. PHPStorm 忽略 node_modules 目录

    如果项目中包含 node_modules 目录,会使 PHPStorm 卡得很慢, 原因:PHPStorm 在进行大量的扫描工作. 解决:忽略它 原文地址:https://segmentfault.c ...

  7. [SoapUI]怎样获取隐藏元素的文本内容Get text of hidden element

    隐藏元素无法通过gettext()获取其文本内容,须用javascript来获取 String actualDataPointName = (String) ((JavascriptExecutor) ...

  8. facebook对xtrabackup的优化整理

    1)Adding xtrabackup files https://github.com/facebook/mysql-5.6/commit/6eb74f86e27410f1ad7bf3379ce15 ...

  9. （最短路 SPFA）Invitation Cards -- poj -- 1511

    链接: http://poj.org/problem?id=1511 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82829#probl ...

  10. intrinsicConditionQueue笔记

    一, 使用conditionQueue需要注意的一些点: 一个conditionQueue被多种Predicate condition 使用是很正常的,所以当一个wait的线程被唤醒的时候,很有可能它 ...