本文主要是介绍(莲花绽放)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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
