纯html5和css3写的放射效果按钮
摘要：在过去的Web开发中，通常使用图片来做按钮的样式。不过随着CSS3技术的发展，你完全可以通过几行代码来定制一个漂亮的按钮，并且还可以呈现渐变、框阴影、文字阴影等效果。此类按钮最大的优势是省去了加载和设计图片的步骤，并且非常易于编辑、扩展和定制,在线查看效果，复制就可运行
html5代码
运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>www.webkfa.com | 纯html5和css3写的放射效果按钮</title>
<style type="text/css">.transparent.header{background:#333;}section[role="main"]{background:#333;color:#fff;}section[role="main"] h1{color:#fff;}section[role="main"] h2{color:#fff;}section[role="main"] h3{color:#fff;}.button{margin-right:0.5em;border-radius:4px;}ol{margin-left:2em;}div#sidebarAd.cleanslate{background:#444!important;color:#fff!important;}div#sidebarAd.cleanslate .ad-sponsor{color:#ccc!important;}.zurb-footer-top{background:#222;}@-webkit-keyframes bigAssButtonPulse {
from { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 50px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow: 0 0 25px #333; }
}
@-webkit-keyframes greenPulse {
from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; }
to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes bluePulse {
from { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #2daebf; -webkit-box-shadow: 0 0 18px #2daebf; }
to { background-color: #007d9a; -webkit-box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
from { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #e33100; -webkit-box-shadow: 0 0 18px #e33100; }
to { background-color: #bc330d; -webkit-box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes magentaPulse {
from { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #a9014b; -webkit-box-shadow: 0 0 18px #a9014b; }
to { background-color: #630030; -webkit-box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes orangePulse {
from { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #ff5c00; -webkit-box-shadow: 0 0 18px #ff5c00; }
to { background-color: #d45500; -webkit-box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes orangellowPulse {
from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }
to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
}
a.button {
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
.green.button { -webkit-animation-name: greenPulse; -webkit-animation-duration: 3s; }
.blue.button { -webkit-animation-name: bluePulse; -webkit-animation-duration: 4s; }
.red.button { -webkit-animation-name: redPulse; -webkit-animation-duration: 1s; }
.magenta.button { -webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s; }
.orange.button { -webkit-animation-name: orangePulse; -webkit-animation-duration: 3s; }
.orangellow.button { -webkit-animation-name: orangellowPulse; -webkit-animation-duration: 5s; }
.wall-of-buttons { text-align: center; margin-top: 2em; margin-bottom: 2em; }
button,.button {
border-style: solid;
border-width: 0;
cursor: pointer;
font-family: inherit;
font-weight: bold;
line-height: normal;
margin: 0 0 1.25em;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 0.75em;
padding-right: 1.5em;
padding-bottom: 0.8125em;
padding-left: 1.5em;
font-size: 1em;
background-color: #2daebf;
border-color: #238896;
color: white
}
</style>
</head>
<body class="off-canvas hide-extras antialiased dark-page" style="background:rgb(51, 51, 51);">
<section role="main" class="body">
<div class="row">
<div class="large-12 columns wall-of-buttons">
<a class="green button">Look at me!</a>
<a class="blue button">Click me!</a>
<a class="magenta button">Hi ho, Silver!</a>
<a class="green button">Look at me!</a>
<a class="red button">I'm Glowing!</a>
<a class="magenta button">Hi ho, Silver!</a>
<a class="orange button">Call to Action</a>
<a class="magenta button">Hi ho, Silver!</a>
<a class="green button">Look at me!</a>
<a class="orangellow button">Got clicks?</a>
<a class="blue button">Click me!</a>
<a class="red button">I'm Glowing!</a>
<a class="blue button">Click me!</a>
<a class="magenta button">Hi ho, Silver!</a>
<a class="orangellow button">Got clicks?</a>
<a class="red button">I'm Glowing!</a>
<a class="orange button">Call to Action</a>
<a class="green button">Look at me!</a>
<a class="orangellow button">Got clicks?</a>
<a class="red button">I'm Glowing!</a>
<a class="blue button">Click me!</a>
<a class="orangellow button">Got clicks?</a>
<a class="blue button">Click me!</a>
<a class="red button">I'm Glowing!</a>
<a class="orange button">Call to Action</a>
<a class="orangellow button">Got clicks?</a>
</div>
</div>
</section>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢