对于一些常用的样式动画,在以下链接中可以进行预览,其中包含很多css样式
https://daneden.github.io/animate.css/
怎么使用呢???
在你的html代码之中加上这个,并且你需要在css文件夹中加入这个animate.css
<link rel="stylesheet" type="text/css" href="css/animate.css">
对于具体元素的应用
.logo {
//前面的这些是这个图标的大小位置调节等
width:65px;
height:45px;
background:url(images1/logo1.png) no-repeat;
background-size:100% 100%;
position:absolute;
left:50%;
top:50%;
margin-left:14px;
margin-top:33px;
z-index: 2;
//对于动画的应用
animation: fadeInDown 2s linear 1;
-webkit-animation: fadeInDown 2s linear 1;
}
在这个元素中,在这个元素出现的时候就会根据设置有相对应的动画出现。
在网址的github上,原作者也对使用进行了阐述,可在网址中打开。