注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

放射效果按钮html代码(仅适用于safari和chrome)  

2013-07-28 23:30:06|  分类: html |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
放射效果按钮html代码(仅适用于safari和chrome) - 米欧studio - 米欧光影工作室
 
颜色表:
--------------------------------------------------
ZURBcolors
--------------------------------------------------
Green: #a5c941 Red: #ff3700
Med Green: #769926 Med Red: #e33100
Drk Green: #91ad52 Drk Red: #872300
Blue: #73cacf Orange: #ff6908
Med Blue: #2daebf Med Orange: #ff5c00
Drk Blue: #007d9a Drk Orange: #d45500
Magenta: #c9025c Yellow: #ffb515
Med Magenta: #a9014b Med Yellow: #fc9200
Drk Magenta: #630030 Drk Yellow: #d17200


基本原理
This Is How We Do It
Using CSS animations in Safari, we're able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome. Don't see the radioactive above? Be sure you're in Safari before getting underway.

For each button, we specify three things:
  1. Animation name (we'll show this later)
  2. Animation duration
  3. And the number of times it repeats (iteration count)
You can see how these come together on the right. The CSS calls a pre-defined animation you create, assigns it a duration, and tells it how long to repeat. Pretty sweet, right?

To make it work, we first specify all our button styles (done in our global styles for ZURB.com) and then we added the shadows. Now, in the animation, we switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect.

And when we add in the animations, bam! Radioactive buttons.


1. Create Your Animation

@-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; }
}

2. And Then Cue It Up
a.green.button {
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}





------------------------------------------------------------
代码:
------------------------------------------------------------
第一个style中是基本按钮功能,之后是html的按钮,最后一部分的style中实现按钮n秒闪光功能。
闪光功能仅适用于safari和chrome浏览器,对于firefox和IE不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闪光的按钮</title>

<style>
/*from:http://zurb.com/playground/radioactive-buttons*/
body,div,a{ padding:0; margin:0;}

body {
color: #555555; background-color:#fff;
font-family: Arial,Helvetica,Helvetica Neue,Verdana,sans-serif;
font-size: 13px;
line-height: 18px;
text-rendering: optimizelegibility;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}


@charset "utf-8";
/* CSS Document */

.wall-of-buttons { width: 100%; height: 200px; text-align: center;
margin:50px auto; padding:10px;
background-color:#333;
}
.wall-of-buttons a.button { display: inline-block; margin: 0 10px 9px 0; }


/* --------------------------------------------------
Global ZURB Styles
--------------------------------------------------
ZURBcolors
--------------------------------------------------
Green: #a5c941 Red: #ff3700
Med Green: #769926 Med Red: #e33100
Drk Green: #91ad52 Drk Red: #872300
Blue: #73cacf Orange: #ff6908
Med Blue: #2daebf Med Orange: #ff5c00
Drk Blue: #007d9a Drk Orange: #d45500
Magenta: #c9025c Yellow: #ffb515
Med Magenta: #a9014b Med Yellow: #fc9200
Drk Magenta: #630030 Drk Yellow: #d17200

/* @group ZURButtons
-------------------------------------------------- */
.button {
background: #222;
display: inline-block;
padding: 5px 15px 6px;
color: #fff !important;
font-size: 13px; font-weight: bold; line-height: 1; text-decoration: none;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25); position: relative;
cursor: pointer;
overflow: visible; width: auto; }
button::-moz-focus-inner { border: 0; padding: 0; }

.button:hover { background-color: #111; color: #fff; }
.button:active { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); }
/* Small Buttons */
.small.button { font-size: 11px; }
/* Large Buttons */
.large.button { font-size: 14px; padding: 8px 19px 9px; }
/* Colors for our beloved buttons */
.green.button { background-color: #91bd09; }
.green.button:hover { background-color: #749a02; }
.blue.button { background-color: #2daebf; }
.blue.button:hover { background-color: #007d9a; }
.red.button { background-color: #e33100; }
.red.button:hover { background-color: #872300; }
.magenta.button{ background-color: #a9014b; }
.magenta.button:hover { background-color: #630030; }
.orange.button { background-color: #ff5c00; }
.orange.button:hover { background-color: #d45500; }
.orangellow.button { background-color: #ffb515; }
.orangellow.button:hover { background-color: #fc9200; }

.white.button { background-color: #fff; border: 1px solid #ccc; color: #666 !important; font-weight: normal; text-shadow: 0 1px 1px rgba(255,255,255,1); }
.white.button:hover { background-color: #eee; }

/*Strike button*/
.strike.button {background-color: #4ADFC1}
.strike.button:hover {background-color: #39ceb0}

/* Secondary buttons (perfect for Cancels or other secondary actions */
.secondary.button { background: #fff; color: #555 !important; text-shadow: 0 1px 1px rgba(255,255,255,0.5); border: 1px solid #bbb; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.secondary.button:hover { background-color: #eee; color: #444 !important; border-color: #999; }

</style>

</head>

<body>


<div class="wall-of-buttons">
<a class="large green button">Look at me!</a>
<a class="large blue button">Click me!</a>
<a class="large magenta button">Hi ho, Silver!</a>
<a class="large green button">Look at me!</a>
<a class="large red button">I'm Glowing!</a>
<a class="large magenta button">Hi ho, Silver!</a>
<a class="large white button">Hi ho, Silver!</a>
<br>

<a class="large orange button secondary">secondary</a>
<a class="large magenta button strike">strike</a>
<a class="small green button">small</a>
<a class="large orangellow button">Got clicks?</a>
<a class="large blue button">Click me!</a>
<a class="large red button">I'm Glowing!</a>
<a class="large blue button">Click me!</a>
<br>

<a class="large magenta button">Hi ho, Silver!</a>
<a class="large orangellow button">Got clicks?</a>
<a class="large red button">I'm Glowing!</a>
<a class="large orange button">Call to Action</a>
<a class="large green button">Look at me!</a>
<a class="large orangellow button">Got clicks?</a>
<a class="large red button">I'm Glowing!</a>

<a class="large blue button">Click me!</a>
<a class="large orangellow button">Got clicks?</a>
<a class="large blue button">Click me!</a>
<a class="large red button">I'm Glowing!</a>
<a class="large orange button">Call to Action</a>
<a class="large orangellow button">Got clicks?</a>
<br>
<a class="button" href="#" id="theButton">no specify color</a>
</div>




<style type="text/css">
/*没有这一段,就不会发光。而且是三秒一次的闪光*/
/* Place all stylesheet code here */
@-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; }

</style>



</body>
</html>


refer:

  评论这张
 
阅读(420)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017