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来绑定

转载于:https://www.cnblogs.com/huangxiaowen/p/4022280.html