首页 > 代码库 > CSS3 过渡与动画

CSS3 过渡与动画

鼠标悬浮炫光效果:http://demo.qpdiy.com/hxw/CSS3/button-light.html

在网页上实现这种动作效果有三种方法:

首先是JS,可以用jquery的animate事件实现,如果不想用JS的话可以通过css3实现

过渡:.button:hover i { left:100%; -webkit-transition:.5s; -moz-transition:.5s; transition:.5s;}

————当鼠标移开后,i会直接变到原来的位置,如果 transition:.5s;写在原来的i上,则鼠标移开后会快速退回到原来位置

动画

.button:hover i { -webkit-animation: butleft 0.5s; -moz-animation: butleft 0.5s; -o-animation: butleft 0.5s; animation:butleft 0.5s; }

@keyframes butleft { from {left:-100px;} to {left:100px;} }

@-moz-keyframes butleft /* Firefox */ { from {left:-100px;} to {left:100px;} }

@-webkit-keyframes butleft /* Safari and Chrome */ { from {left:-100px;} to {left:100px;} }

@-o-keyframes butleft /* Opera */ { from {left:-100px;} to {left:100px;} }

CSS3 动画比过渡来说代码量是多了一些,但是它能从0%到100%之间直接定义不同的动作

 

注意:

1、<i>元素里面如果没有内容的话事件是绑定不上的,必须要绑定在button存在的标签内;

2、hover事件不能用on来绑定

CSS3 过渡与动画