CSS - animation
旋转
.rotate {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
animation: rotates 3s infinite linear;
-webkit-animation: rotates 3s infinite linear;
}
@keyframes rotates {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotates {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
闪烁
.glint {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-animation:glint 1.5s infinite;
animation:glint 1.5s infinite;
}
@-webkit-keyframes glint{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
@keyframes glint{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
渐显
.fade {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-animation:fade-in 1.5s infinite;
/* infinite 是为了让其在本页中效果更明显 */
/* 搞的跟闪烁效果差不多了 233 */
animation:fade-in 1.5s infinite;
}
@keyframes fade-in{
0%{opacity:.1}
20%{opacity:.2}
30%{opacity:.3}
40%{opacity:.4}
50%{opacity:.5}
60%{opacity:.6}
70%{opacity:.7}
80%{opacity:.8}
90%{opacity:.9}
100%{opacity:1}
}
@-webkit-keyframes fade-in{
0%{opacity:.1}
20%{opacity:.2}
30%{opacity:.3}
40%{opacity:.4}
50%{opacity:.5}
60%{opacity:.6}
70%{opacity:.7}
80%{opacity:.8}
90%{opacity:.9}
100%{opacity:1}
}
变色
.discolor {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 100px !important;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-animation:discolors 3s infinite;
animation:discolors 3s infinite;
}
@-webkit-keyframes discolors{
0%{-webkit-filter:saturate(.1)}
50%{-webkit-filter:saturate(3)}
100%{-webkit-filter:saturate(5)}
}
@keyframes discolors{
0%{filter:saturate(.1)}
50%{filter:saturate(3)}
100%{filter:saturate(5)}
}
推荐使用谷歌浏览器。
To be continued ...