<!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. win7 python2.7安装PIL库

    一.前言 遇到客户给了一个需求,需要拼接多个图片,上网找到一个解决方式,不过是需要安装PIL的,相信安装过这个库的应该都遇到很多问题,接下来说说怎么解决. 我的环境是: 操作系统:win10 64bi ...

  3. DevExress笔记

    最近用DevExpress的WPF图表控件做柱形图看板,总结记录了一些笔记: 1.显示图例: <dxc:ChartControl.Legend> <dxc:Legend /> ...

  4. eigen安装

    https://blog.csdn.net/liuxiaoheng1992/article/details/54410148

  5. Java程序设计19——类的加载和反射-Part-B

    接下来可以随意提供一个简单的主类,该主类无须编译就可使用上面的CompileClassLoader来运行它. package chapter18; public class Hello { publi ...

  6. CentOS 7 装好系统一些优化

    1.禁用SELINUX vi /etc/sysconfig/selinux  设置为disabled 2.同步时间*/20 * * * * /usr/sbin/ntpdate pool.ntp.org ...

  7. ubuntu12.04安装nox-classic

    Setup Nox repo for ‘nox-dependencies’ package $ cd /etc/apt/sources.list.d/ $ wget http://openfl ...

  8. linux每天一小步---mkdir命令详解

    1 命令功能 mkdir命令用于创建单个目录或者多级目录,但前提在于用户对于当前目录有写权限. 2 命令语法 mkdir  [选项]  [目录名] 3 命令参数 -m 在创建目录的同时设定目录权限(而 ...

  9. 【转】ProGuard的作用、使用及bug分析

    原文地址:http://blog.csdn.net/forlong401/article/details/23539123. http://www.trinea.cn/android/proguard ...

  10. 正则表达式REGEXP

    正则表达式:REGular EXPression, REGEXP 元字符: .: 匹配任意单个字符 []: 匹配指定范围内的任意单个字符 [^]:匹配指定范围外的任意单个字符 字符集合:[:digit ...