今天我在学习transation 时在网上看见一个网友写的莲花绽放很炫,我也试着写咯一下,效果如下所示
html代码:
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- <div></div> -->
</div>
css代码:
body{background-color: #d4d4d4; height: 100%; overflow: hidden;}
.box{ width: 600px; height: auto; margin:50px auto; position: relative;
-webkit-transform:rotate(-34deg);
-moz-transform:rotate(-34deg);
-0-transform:rotate(-34deg);
transform:rotate(-34deg);
/*transition: all 2s linear;*/
}
.box >div{ width: 300px; height: 300px; border-radius: 0 300px; position: absolute; margin-top:100px; left: -38%;opacity: 0.5;/*background: #f36486;border:1px solid orange;*/
filter:alpha(opacity=50);
/*IE渐变设置样式*/
/* 第一个参数:渐变起始位置的颜色
第二个参数:渐变终止位置的颜色
第三个参数:渐变的类型
0 代表竖向渐变 1 代表横向渐变
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1);
*/
background: -webkit-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
background: -moz-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
background: -o-linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
background: linear-gradient(bottom right ,#f36486, #f7829d, #fae3e4);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}
.box > div:nth-child(1){
-webkit-animation: show_1 5s ease-in-out infinite;
animation: show_1 5s ease-in-out infinite;
}
.box > div:nth-child(2){
-webkit-animation: show_2 5s ease-in-out infinite;
animation: show_2 5s ease-in-out infinite;
}
.box > div:nth-child(3){
-webkit-animation: show_3 5s ease-in-out infinite;
animation: show_3 5s ease-in-out infinite;
}
.box > div:nth-child(4){
-webkit-animation: show_4 5s ease-in-out infinite;
animation: show_4 5s ease-in-out infinite;
}
.box > div:nth-child(5){
-webkit-animation: show_5 5s ease-in-out infinite;
animation: show_5 5s ease-in-out infinite;
}
.box > div:nth-child(6){
-webkit-animation: show_6 5s ease-in-out infinite;
animation: show_6 5s ease-in-out infinite;
}
.box > div:nth-child(7){
-webkit-animation: show_7 5s ease-in-out infinite;
animation: show_7 5s ease-in-out infinite;
}
.box > div:nth-child(8){
-webkit-animation: show_8 5s ease-in-out infinite;
animation: show_8 5s ease-in-out infinite;
}
/*1*/
@keyframes show_1{
0%{transform:rotate(0deg);}
100%{transform:rotate(0deg);}
}
@-webkit-@keyframes show_1{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(0deg);}
}
/*2*/
@keyframes show_2{
0%{transform:rotate(0deg);}
100%{transform:rotate(22.5deg);}
}
@-webkit-@keyframes show_2{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(22.5deg);}
}
/*3*/
@keyframes show_3{
0%{transform:rotate(0deg);}
100%{transform:rotate(45deg);}
}
@-webkit-@keyframes show_3{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(45deg);}
}
/*4*/
@keyframes show_4{
0%{transform:rotate(0deg);}
100%{transform:rotate(67.5deg);}
}
@-webkit-@keyframes show_4{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(67.5deg);}
}
/*5*/
@keyframes show_5{
0%{transform:rotate(0deg);}
100%{transform:rotate(90deg);}
}
@-webkit-@keyframes show_5{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(90deg);}
}
/*6*/
@keyframes show_6{
0%{transform:rotate(0deg);}
100%{transform:rotate(112.5deg);}
}
@-webkit-@keyframes show_6{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(112.5deg);}
}
/*7*/
@keyframes show_7{
0%{transform:rotate(0deg);}
100%{transform:rotate(135deg);}
}
@-webkit-@keyframes show_7{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(135deg);}
}
/*8*/
@keyframes show_8{
0%{transform:rotate(0deg);}
100%{transform:rotate(157.5deg);}
}
@-webkit-@keyframes show_8{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(157.5deg);}
}