animate.css-非常cool的css3第三方库特效-贴上demo

<!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

猜你喜欢
