<!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>animate.css_Demo_1812139219</title> <meta name="keywords" content=""> <meta name="description" content=""> <link rel="stylesheet" href="animate.css" /> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <style type="text/css"> #test { text-align: center; background: #39c; padding: 10px; width: 180px; color: #fff; margin: 0 auto; text-shadow: 0 1px 0 rgba(0,0,0,.3); background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%); background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%); background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%); border-radius: 5px; border: 1px solid #17a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font-weight: bold; /*css3样式属性*/ /*//必须要加,animation-duration是用来指定元素播放动画所持续的时间长*/ animation-duration: 1s; /*//循环次数,infinite为无限次数循环。*/ animation-iteration-count:7; /*animation-delay: .2s; 是用来指定元素动画开始时间*/ /*animation-timing-function: ease;是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。*/ /*animation-fill-mode: both;*/ } .test{ text-align: center; background: #39c; padding: 10px; height:220px; width: 380px; color: #fff; margin: 0 auto; text-shadow: 0 1px 0 rgba(0,0,0,.3); background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%); background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%); background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%); border-radius: 5px; border: 1px solid #17a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); font-weight: bold; /*css3样式属性*/ /*必须要加,animation-duration是用来指定元素播放动画所持续的时间长*/ animation-duration: 3s; /*循环次数,infinite为无限次数循环。*/ animation-iteration-count:5; /*animation-delay: .2s; 是用来指定元素动画开始时间c43张峰*/ /*animation-timing-function: ease;是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。*/ /*animation-fill-mode: both;*/ } </style> <script> $(function(){ $('input').hover(function(){ $('#test').addClass('bounce'); },function(){ $('#test').removeClass('bounce'); }); }) </script> </head> <body> <div id ="test" ></div> <br /> <div class="test zoomOutUp"> 1.引入animate.css样式库 <br /> 2.元素样式,必须必须包括css3属性 animation-duration: 1s; 或者目标元素添加class animated <br /> 3.目标元素,增添想要的动画class。比如flash/pulse,bounce,shake,tada,swing,wobble, <br /> 只在google,firrefox,ie10,有效果,flip,flipInx,flipOutX,flipInY,flipOutY, <br />zoomOutUp,hinge,rollIn,rollOut <br /> ...更多效果http://daneden.github.io/animate.css/ </div> <input type="button" value='鼠标移上来试试'/> </body> </html>
animate.css-非常cool的css3第三方库特效-贴上demo
猜你喜欢
转载自blog.csdn.net/fxtc2013/article/details/44827945
今日推荐
周排行