使用 CSS3 实现超炫的div模块动画效果
HTML 代码：<div class="spinner"></div>
效果1 css
.spinner {
width:60px;
height:60px;
background-color:#67CF22;
margin:100pxauto;
-webkit-animation: rotateplane1.2s infinite ease-in-out;
animation: rotateplane1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%{ -webkit-transform: perspective(120px) }
50%{ -webkit-transform: perspective(120px) rotateY(180deg) }
100%{ -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0%{
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}50%{
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}100%{
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
效果2css
.spinner {
margin:100pxauto;
width:32px;
height:32px;
position:relative;
}
.cube1, .cube2{
background-color:#67CF22;
width:30px;
height:30px;
position:absolute;
top:0;
left:0;
-webkit-animation: cubemove1.8s infinite ease-in-out;
animation: cubemove1.8s infinite ease-in-out;
}
.cube2{
-webkit-animation-delay:-0.9s;
animation-delay:-0.9s;
}
@-webkit-keyframes cubemove {
25%{ -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50%{ -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75%{ -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100%{ -webkit-transform: rotate(-360deg) }
}
@keyframes cubemove {
25%{
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
}50%{
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
}50.1%{
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
}75%{
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
}100%{
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
效果3css
.spinner {
width:40px;
height:40px;
margin:100pxauto;
background-color:#333;
border-radius:100%;
-webkit-animation: scaleout1.0s infinite ease-in-out;
animation: scaleout1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout {
0%{ -webkit-transform: scale(0.0) }
100%{
-webkit-transform: scale(1.0);
opacity:0;
}
}
@keyframes scaleout {
0%{
transform: scale(0.0);
-webkit-transform: scale(0.0);
}100%{
transform: scale(1.0);
-webkit-transform: scale(1.0);
opacity:0;
}
}
