建站技术分享网<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用wow做的项目</title>
<link href="animate.min.css" rel="stylesheet">
<style>
.container{
width:800px;
margin:0 auto;
}
.container ul{
display:flex;
display:-webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container ul li{
width:300px;
height:300px;
margin-bottom:40px;
list-style:none;
border-radius:50%;
text-align:center;
vertical-align:middle;
align-items: center;
line-height:300px;
background-color:pink;
}
.container ul li:nth-child(4n){
background-color:#409EFF;
}
.container ul li:nth-child(4n+1){
background-color:#67C23A;
}
.container ul li:nth-child(4n+2){
background-color:#E6A23C;
}
</style>
</head>
<body>
<p>
data-wow-duration：更改动画持续时间<br>
data-wow-delay：动画开始前的延迟<br>
data-wow-offset：开始动画的距离（与浏览器底部相关）<br>
data-wow-iteration：动画的次数重复（无限次：infinite）<br>
</p>
<section class="container">
<ul>
<li class="wow bounceInLeft">bounceInLeft</li>
<li class="wow bounceInRight">bounceInRight</li>
<li class="wow bounceIn">bounceIn</li>
<li class="wow bounceInUp">bounceInUp</li>
<li class="wow bounceInDown">bounceInDown</li>
<li class="wow slideInUp" data-wow-delay="0.9s" data-wow-offset="100">slideInUp</li>
<li class="wow slideInDown">slideInDown</li>
<li class="wow slideInLeft">slideInLeft</li>
<li class="wow slideInRight">slideInRight</li>
<li class="wow lightSpeedIn">lightSpeedIn</li>
<li class="wow pulse">pulse</li>
<li class="wow flipInX">flipInX</li>
<li class="wow flipInY">flipInY</li>
<li class="wow bounce">bounce</li>
<li class="wow shake">shake</li>
<li class="wow wobble" data-wow-iteration="infinite">wobble</li>
<li class="wow rollIn">rollIn</li>
<li class="wow fadeInUpBig" data-wow-delay="0.3s">fadeInUpBig</li>
<li class="wow fadeInUpBig" data-wow-delay="0.6s">fadeInUpBig</li>
<li class="wow fadeInUpBig" data-wow-delay="0.9s">fadeInUpBig</li>
<li class="wow fadeInUpBig" data-wow-delay="1.2s">fadeInUpBig</li>
<li class="wow fadeInUpBig" data-wow-delay="1.5s">fadeInUpBig</li>
</ul>
</section>
<script src="wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
分类： css
wow+animation实现css3动画特效
文章作者：清风
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &......
发表评论