[CSS3] 动画暗角按钮

<!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] 动画暗角按钮的更多相关文章

CSS3动画之按钮抖动
今天要分享一组代码,当鼠标悬停在按钮上时.按钮抖动!!! <!DOCTYPE html> <html lang="en"> <head> < ...
美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
【转】15个无比华丽的HTML5/CSS3动画应用
原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...
8个超炫酷的纯CSS3动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
9款精美别致的CSS3菜单和按钮
1.超具立体感的CSS3 3D菜单菜单项带小图标记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...
分享7款顶级的CSS3动画特效
1.CSS3 SVG文字背景动画超酷的文字特效今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...
jQuery插件css3动画模拟confirm弹窗
相比浏览器自带的alert.confirm,能力所及,我更喜欢所有的东西都是自定义:首先在head标签(当然喜欢其他地方自己看着办)内引入插件样式表和js.<link rel="sty ...
如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论先看代码: html: <div id ...

随机推荐

在spring中使用quartz配置作业的二种方式
在mybatis中模糊查询有三种写法
<select id="selectStudentsByName" resultType="Student">  ...
Linux学习---linux的svn的配置与安装
1.检查是否已安装 rpm -qa subversion 如果要卸载旧版本: yum remove subversion 2.安装 yum install subversion 3.检查是否安装成 ...
11-SSH综合案例：前台用户模块：激活邮件的发送
刚才已经把服务器的环境和客户端的软件已经搭建好了,现在就要发送邮件了.现在发送邮件的代码你不用重点去掌握啊,了解一下就行了. javax.activation javax.mail是Java EE 5 ...
DropDownList绑定数据的几种方式
1. 视图中添加可以直接通过单击属性"Items"后的按钮为某一DropDownList控件添加数据项.每添加一项数据就是添加了一个ListItem(列表控件中的数据项).这种方式 ...
mybatis框架入门程序：演示通过mybatis实现数据库的添加操作
1.mybatis的基本配置准备在我的这篇博文中可以找到:https://www.cnblogs.com/wyhluckdog/p/10149480.html 2. 映射文件: 在User.xml中添 ...
Caffe 议事（二）：从零开始搭建 ResNet 之网络的搭建（上）
3.搭建网络: 搭建网络之前,要确保之前编译 caffe 时已经 make pycaffe 了. 步骤1:导入 Caffe 我们首先在 ResNet 文件夹中建立一个 mydemo.py 的文件,本参 ...
原型模式及C++实现
以下是我自己学习设计模式的感想. 原型模式学过C++的都知道拷贝构造函数,复制一个对象分为浅拷贝和深拷贝. 浅拷贝:就是给对象中的每个成员变量进行复制,就是把A1类中的变量直接赋给A2类中变量,属于 ...
ZOJ3704 I am Nexus Master! 2017-04-06 23:36 56人阅读评论(0) 收藏
I am Nexus Master! Time Limit: 2 Seconds Memory Limit: 65536 KB NexusHD.org is a popular PT (Pr ...

[CSS3] 动画暗角按钮

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

随机推荐

热门专题