1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body{
  8.             position:relative;
  9.             text-align: center;
  10.             background:#212322;
  11.         }
  12.         h1{
  13.             color:#1A897A;
  14.             font-family: "Palatino Linotype";
  15.             font-size: 60px;
  16.             margin:40px;
  17.             text-shadow: 2px 2px 0 #183e2b;
  18.         }
  19.         #demo-box{
  20.             width:550px;
  21.             margin:40px auto;
  22.             padding:40px 40px 20px;
  23.             background:#c7e1d5;
  24.             border-radius: 12px;
  25.             overflow: hidden;
  26.         }
  27.         .button{
  28.             float:left;
  29.             margin-bottom:30px;
  30.         }
  31.         #info-box{
  32.             clear:left;
  33.             padding:20px 20px 10px;
  34.             background:#abd5c1;
  35.             border-radius: 10px;
  36.         }
  37.  
  38.         p{
  39.             margin:0 0 1.2em;
  40.             color:#333333;
  41.             font-family: Arial;
  42.             font-size: 13px;
  43.             line-height: 1.3em;
  44.         }
  45.         #eg1{
  46.             background:url(img/background.png) no-repeat center -105px;
  47.             display: block;
  48.             width:5em;
  49.             padding:30px 40px;
  50.             text-align: center;
  51.             font-family: Arial;
  52.             font-size: 18px;
  53.             color:#fff;
  54.             text-decoration:none;
  55.             text-shadow: 1px 1px 0 #000;
  56.             border-radius:25px;
  57.             background:url(img/linear-gradient.png) no-repeat 0px -400px,url(img/background.png) no-repeat center -8px;
  58.             box-shadow: 2px 2px 10px #000;
  59.             transition:all 1s ease;
  60.         }
  61.         #eg1:hover{
  62.             background:url(img/background.png) no-repeat center -5px;
  63.             background:url(img/linear-gradient.png) no-repeat 0px 0px,url(img/background.png) no-repeat center -8px;
  64.         }
  65.         #eg2{
  66.             background: url(img/background.png) no-repeat center -105px;    /* Fallback */
  67.             display: block;
  68.             width: 5em;
  69.             margin: 0px 20px;
  70.             padding: 30px 40px;
  71.             text-align: center;
  72.             font-family: Arial, sans-serif;
  73.             font-size: 18px;
  74.             color: #fff;
  75.             text-decoration: none;
  76.             text-shadow: 1px 1px 0px #000;
  77.             border-radius: 25px;
  78.             background: url(img/stripes.png) no-repeat 0px 0px, url(img/background.png) no-repeat center -8px;
  79.             box-shadow: 2px 2px 10px #000;
  80.             transition: all 1s ease-out;
  81.         }
  82.         #eg2:hover {
  83.             background: url(img/background.png) no-repeat center -5px;
  84.             background: url(img/stripes.png) no-repeat 0px -200px, url(img/background.png) no-repeat center -8px;
  85.             transition: all 0.5s ease;
  86.         }
  87.  
  88.         #eg3 {
  89.             background: url(img/background.png) no-repeat center -105px;
  90.             display: block;
  91.             width: 5em;
  92.             padding: 30px 40px;
  93.             text-align: center;
  94.             font-family: Arial, sans-serif;
  95.             font-size: 18px;
  96.             color: #fff;
  97.             text-decoration: none;
  98.             text-shadow: 1px 1px 0px #000;
  99.             border-radius: 25px;
  100.             background: url(img/radial-gradient.png) no-repeat center center, url(img/background.png) no-repeat center -8px;
  101.             box-shadow: 2px 2px 10px #000;
  102.             background-size: 200px 200px, 180px 200px;
  103.             transition: all 0.75s ease;
  104.         }
  105.         #eg3:hover {
  106.             background: url(img/background.png) no-repeat center -5px;
  107.             background: url(img/radial-gradient.png) no-repeat center center, url(img/background.png) no-repeat center -8px;
  108.             background-size: 1000px 1000px, 180px 200px;
  109.             transition: all 1s ease;
  110.         }
  111.     </style>
  112. </head>
  113. <body>
  114.     <h1>CSS3动画暗角按钮</h1>
  115.     <div id="demo-box">
  116.         <a id="eg1" class="button" href="#">Fade In</a>
  117.         <a id="eg2" class="button" href="#">Peer Thro'</a>
  118.         <a id="eg3" class="button" href="#">Iris</a>
  119.         <div id="info-box">
  120.             <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.
  121.             <p>They fallback nicely in browsers that don't fully support the CSS3 properties in use.</p>
  122.             <p>For more info check out the source or this accompanying article.</p>
  123.         </div>
  124.     </div>
  125. </body>
  126. </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. socket & pipe note

    [socket & pipe note] 1.socket类型 2.大小端 3.socketpair 如何创建全双工管道? 直接的办法当然是pipe两次,创建两组管道,但是有没有更简单的呢? ...

  2. 18-(unicode error) 'unicodeescape' codec can't decode bytes in position 16-17: truncated \uXXXX escape

    读取文件时碰到问题: 1.(unicode error) 'unicodeescape' codec can't decode bytes in position 16-17: truncated \ ...

  3. 5-math中函数汇总

    math.h 数学函数库,一些数学计算的公式的具体实现是放在math.h里,具体有:1 三角函数double sin (double);double cos (double);double tan ( ...

  4. Git学习笔记——从一台电脑上传文件到Github上

    目标:从一台电脑上传文件到Github上 前提: 1.这里假定已在Github上创建了仓库,建立了仓库 2.已在这台电脑上安装了Git客户端 实验环境: 1.Windows 10 64位,已安装了Gi ...

  5. jquery记录

    jquery validate验证框架 参考:http://www.cnblogs.com/linjiqin/p/3431835.html http://www.runoob.com/jquery/j ...

  6. 在JS中使用全局变量

    在JS中使用全局变量不像C++,也不像PHP. 先摆出错的代码: var globalvar = 'a'; function test(){ alert(globalvar); } 这里弹出的是und ...

  7. VMware workstation 语言包切换

    VMware-workstation-full-10.0.2-1744117安装默认为中文版,如果要使用英文版做如下操作: 找到你的VMware安装目录:例如:D:\Program Files (x8 ...

  8. Mosquitto服务器的搭建以及SSL/TLS安全通信配置

    Mosquitto服务器的搭建以及SSL/TLS安全通信配置 摘自:https://segmentfault.com/a/1190000005079300 openhab  raspberry-pi ...

  9. 模拟在table中移动鼠标，高亮显示鼠标所在行，固定表头

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  10. C语言条件编译及编译预处理阶段（转）

    一.C语言由源代码生成的各阶段如下: C源程序->编译预处理->编译->优化程序->汇编程序->链接程序->可执行文件 其中 编译预处理阶段,读取c源程序,对其中的 ...