一点简单的CSS动画（CSS实现）
图片展开：
（transition和transform结合实现的）
HTML部分：
<div class="div1">
<img src="img/1367482836394.jpg" class="img1" />
<img src="img/1370512282166.jpg" class="img2"/>
<img src="img/1373337078811.jpg" class="img3"/>
</div>
CSS：
img{
height: 300px;
width: 500px；
position: absolute;
left: 755px;/*也可取auto*/
background-color: white;
transition: width 1s ease;/*属性 过渡的时间 过渡效果*/
}
.img1{
transform: rotate(15deg);/*顺时针转15度*/
}
.img3{
transform: rotate(-15deg);
}
.div1{
width: 500px;
height: 300px;
}
.div1:hover img:first-child{
transform: rotate(40deg);
transform-origin: center 600px;
transition: transform 1s ease;
}
.div1:hover img:last-child{/*父元素的最后一个子元素*/
transform: rotate(-40deg);
transform-origin: center 600px;
transition: transform 1s ease;
}
加载信号图：
（巧用animation-deley来实现的）
HTML部分：
<div class="spinner">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
</div>
CSS：
.spinner{
width: 50px;
height: 50px;
}
.spinner div{
display: inline-block;
width: 6px;
height: 100%;
background: green;
-webkit-animation: asd 1.2s infinite ease-in-out; /*asd是动画name，会在后面@keyfream中自己定义*/
}
.spinner .line1{
width: 3px;
height: 15px;
margin-right: 3px;
background-color: green;
float: left;
-webkit-animation-delay: -1.1s;
}
.spinner .line2{
width: 3px;
height: 15px;margin-right: 3px;
background-color: green; float: left;
-webkit-animation-delay: -1s;/*webkit前缀是对应浏览器，反正我用谷歌可以动*/
}
.spinner .line3{
width: 3px;
height: 15px;margin-right: 3px;
background-color: green; float: left;
-webkit-animation-delay: -0.9s;
}
.spinner .line4{
width: 3px;
height: 15px;margin-right: 3px;
background-color: green; float: left;
-webkit-animation-delay: -0.8s;
}
.spinner .line5{
width: 3px;
height: 15px;margin-right: 3px;
background-color: green; float: left;
-webkit-animation-delay: -0.7s;
}
@-webkit-keyframes asd{/*顾名思义，keyframe，关键帧*/
0%,40%,100%{-webkit-transform: scaleY(.4);}/*也可以是from。。。to。。。这里的话，0%，40%，100%帧时，是这个样式*/
20%{-webkit-transform: scaleY(1);}
}
加载图2：
（这个是通过改变border的颜色来实现的）
HTML部分只是一个简单的div<div class="spinner1"></div>
CSS;
.spinner1{
width: 10em;
height: 10em;
margin: 100px auto;
border: 1.1em solid rgba(225,225,225,.2);/*em就是单位的*/
border-left-color: #fff;
border-radius: 50%;
-webkit-animation: load 1.1s infinite linear;/*liner是动画效果*/
}
@-webkit-keyframes load{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
body{
background-color: black;
}
发现的一个CSS动图库：https://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html
网友评论