<!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
最新推荐文章于 2022-11-17 17:01:30 发布