admin 管理员组

文章数量: 1086866

(莲花绽放)animation

今天我在学习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);}}




本文标签： (莲花绽放)animation

版权声明：本文标题：(莲花绽放)animation 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700306965a389493.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。