<!DOCTYPE html>
<html>
<head>
<title>CSS3动画暗角按钮 - 网页模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
/* ---------- CSS3 Animated Vignette Buttons by MightyMeta ---------- */
/* ---------- General Demo Styling - You Can Ignore This Bit ---------- */
body {
position: relative;
text-align: center;
background-color: #212322;
}
h1 {
color: #1A897A;
font-family: Palatino,serif;
font-size: 60px;
margin: 40px;
text-shadow: 2px 2px 0 #184E2B;
}
#demo-box {
width: 550px;
margin: 40px auto;
padding: 40px 40px 20px;
background-color: #C7E1D5;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
overflow: hidden;
}
.button {
float: left;
margin-bottom: 30px;
}
#info-box {
clear: left;
padding: 20px 20px 10px;
background-color: #ABD5C1;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
}
p {
margin: 0 0 1.2em;
color: #333333;
font-family: Arial,sans-serif;
font-size: 13px;
line-height: 1.3em;
}
.article-link {
color: #198975;
}
.article-link:hover {
text-decoration: none;
}
#whodunnit {
position: fixed;
right: 0;
bottom: 0;
width: 200px;
height: 25px;
padding-top: 5px;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
color: #fff;
background-color: #2C2C2C;
}
#whodunnit:hover {
text-shadow: 0 0 10px #fff;
}
span {
color: #198975;
}
/* ----------------------------------------------------------------- */
/* -------------------- The Button Goodness !!! -------------------- */
/* ----------------------------------------------------------------- */
/* ---------- Example One ---------- */
#eg1 {
background: url(images/background.png) no-repeat center -105px; /* Fallback */
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;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
background: url(images/linear-gradient.png) no-repeat 0px -400px, url(images/background.png) no-repeat center -8px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#eg1:hover {
background: url(images/background.png) no-repeat center -5px; /* Fallback */
background: url(images/linear-gradient.png) no-repeat 0px 0px, url(images/background.png) no-repeat center -8px;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* ---------- Example Two ---------- */
#eg2 {
background: url(images/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;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
background: url(images/stripes.png) no-repeat 0px 0px, url(images/background.png) no-repeat center -8px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#eg2:hover {
background: url(images/background.png) no-repeat center -5px; /* Fallback */
background: url(images/stripes.png) no-repeat 0px -200px, url(images/background.png) no-repeat center -8px;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/* ---------- Example Three ---------- */
#eg3 {
background: url(images/background.png) no-repeat center -105px; /* Fallback */
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;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
border-radius: 25px;
background: url(images/radial-gradient.png) no-repeat center center, url(images/background.png) no-repeat center -8px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
-moz-background-size: 200px 200px, 180px 200px;
-webkit-background-size: 200px 200px, 180px 200px;
-o-background-size: 200px 200px, 180px 200px;
background-size: 200px 200px, 180px 200px;
-moz-transition: all 0.75s ease;
-webkit-transition: all 0.75s ease;
-o-transition: all 0.75s ease;
transition: all 0.75s ease;
}
#eg3:hover {
background: url(images/background.png) no-repeat center -5px; /* Fallback */
background: url(images/radial-gradient.png) no-repeat center center, url(images/background.png) no-repeat center -8px;
-moz-background-size: 1000px 1000px, 180px 200px;
-webkit-background-size: 1000px 1000px, 180px 200px;
-o-background-size: 1000px 1000px, 180px 200px;
background-size: 1000px 1000px, 180px 200px;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
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 images - 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><!-- end info-box-->
</div><!-- end demo-box-->
<div style="text-align:center;clear:both">
<p><font color="#FFFFFF">适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</font></p>
<p><font color="#FFFFFF">来源：</font><a href="http://www.moobnn.com/" target="_blank"><font color="#FFFFFF">网页模板</font></a></p>
</div>
</body>
</html>
CSS3动画暗角按钮.zip
版权申诉
66 浏览量
2022-11-16
21:21:31
上传
评论
收藏 79KB ZIP 举报
CSS3动画暗角按钮.zip （6个子文件） 
CSS3动画暗角按钮 jiaoben1366 images 
background.png 19KB stripes.png 865B linear-gradient.png 1KB radial-gradient.png 6KB
index.html 7KB
CSS3动画暗角按钮.jpg 66KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 20240420-扬州高中小学部风雨操场转换层条件图r.dwg
- 小猫咪邮件在线发送系统源码v1.1，支持添加附件
- 永磁电机铜耗估算表-Excel-v1.0
- 参考资料-人工智能对劳动力市场的影响机制研究.pdf
- 协同供应链集成产品介绍V71sp1.rar
- 上市公司-人工智能的采纳程度面板数据（2003-2021年）.xlsx
- 参考资料-人工智能技术应用对就业的影响及作用机制研究-来自制造业企业的微观证据.pdf
- 第5章spring-mvc请求映射处理
- 2023-04-06-项目笔记 - 第一百十六阶段 - 4.4.2.114全局变量的作用域-114 -2024.04.27
- 协同供应链集成产品介绍V70.rar
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
