Chrome下效果理想,Firefox,IE9下没有动画效果。
CSS代码片段
.button, .button:visited{
background:#222 url(overlay.png) repeat-x;
display:inline-block;
padding:5px 10px 6px;
color:#fff;
text-decoration:none;
/*border-radius*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);
box-shadow:0 1px 3px rgba(0,0,0,0.6);
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;
}
.button:hover{
background-color:#111;
color:#fff;
/*animation-duration*/
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
/*animation-timing-function*/
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
-ms-animation-timing-function:ease-out;
-o-animation-timing-function:ease-out;
animation-timing-function:ease-out;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
/*定义动画*/
@-webkit-keyframes greenPulse{
from { background-color:#91bd09;
/*box-shadow*/
-webkit-box-shadow:0 0 9px #333;
-moz-box-shadow:0 0 9px #333;
box-shadow:0 0 9px #333;
}
50%{
background-color:#B4E02C;
/*box-shadow*/
-webkit-box-shadow:0 0 18px #91bd09;
-moz-box-shadow:0 0 18px #91bd09;
box-shadow:0 0 18px #91bd09;
}
to{
background-color:#91bd09;
/*box-shadow*/
-webkit-box-shadow:0 0 9px #333;
-moz-box-shadow:0 0 9px #333;
box-shadow:0 0 9px #333;
}
}
.green.button, .green.button:visited{
background-color:#91bd09;
}
.green.button:hover{
/*animation-name*/
-webkit-animation-name:greenPulse;
-moz-animation-name:greenPulse;
-ms-animation-name:greenPulse;
-o-animation-name:greenPulse;
animation-name:greenPulse;
}
HTML代码片段
<ul>
<li>
<a class="button magenta super" href="#">按钮</a>
<a class="button green super" href="#">按钮</a>
<a class="button red super" href="#">按钮</a>
<a class="button orange super" href="#">按钮</a>
<a class="button blue super" href="#">按钮</a>
<a class="button yellow super" href="#">按钮</a>
</li>
<li>
<input type="button" class="button magenta super" value="按钮" />
<input type="button" class="button green super" value="按钮" />
<input type="button" class="button red super" value="按钮" />
<input type="button" class="button orange super" value="按钮" />
<input type="button" class="button blue super" value="按钮" />
<input type="button" class="button yellow super" value="按钮" />
</li>
</ul>
- 大小: 155.7 KB
分享到:
相关推荐
纯CSS3实现线条按钮动画特效是一款鼠标经过显示动画按钮特效。
css3实现动画按钮
CSS3鼠标Hover按钮动画特效是一款使用flex来进行布局,并通过css transition来实现动画效果。
css3实现简单动画导航按钮,主要运用了css3中的transition技术
很久没有向大家分享关于CSS3按钮的动画特效了,今天就给大家带来8款超酷而实用的CSS3按钮动画,由于google字体服务被屏蔽的缘故,所以你在截图上看到的字体和实际演示会有所差异。一起来看看这些CSS3按钮吧。 1、CSS...
这是一款css3鼠标悬停按钮的动画。该动画效果在鼠标悬停到超链接上面的时候,通过伪元素来制作边框浮动动画,效果非常炫酷。
一款基于纯CSS3的发光按钮,按钮发光的颜色是随机的,这样一排...之前我们也介绍过不少样式很独特的CSS3按钮,比如纯CSS3 3D开关按钮、纯CSS3实现动感弹性按钮等,都非常不错,也有HTML5动画按钮,大家可以自己看看。
5组基于CSS3实现的按钮动画效果代码.zip
漂亮的纯CSS3实现线条按钮动画特效是一款鼠标经过显示动画按钮特效。
代码简介:CSS3实现酷炫动画按钮特效是一款当鼠标点击提交按钮以后,根据屏幕大小响应式改变动画播放效果。
HTML5+CSS3源码_纯CSS3实现滑杆开关切换按钮动画.rar.rar
css3实现动画按钮.zip
纯CSS3实现按钮动画效果代码是一款里面包含5款不同效果的CSS3按钮特效。
css 3 动画实实现点赞动画,技术栈使用到了css 中的transform这个属性,项目中有需要的修改之处,请即使之处,这里会即使修改,
代码简介: 纯CSS3鼠标滑过动画按钮特效是一款基于CSS3 transition属性实现的按钮动画特效。
css3弹性果冻按钮动画特效是一款基于js跟css3实现的带动画效果的按钮切换特效。
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
单纯css3做的各种炫丽按钮,特效按钮,会呼吸的按钮,颜色渐变, 直接通过css3绘制出特殊效果,使用css的动画技术实现的简单例子