这篇文章给大家分享的是有关css3如何实现莲花绽放的动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。先来看效果:这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现9片花瓣。效果的叠加而已。HT
这篇文章给大家分享的是有关css3如何实现莲花绽放的动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
先来看效果:
这效果看起来挺炫,但原理并不复杂,能实现一片花瓣动起来,就能实现9片花瓣。效果的叠加而已。
HTML:
<section class="demo"> <div class="box"> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> <div class="leaf"></div> </div> </section>
CSS:
View Code body { background-color: #000;} .demo { margin:0px auto; width: 500px;}.box { position: relative; height: 400px; margin-top:400px}.box .leaf { position: absolute;}.leaf { margin-top:0px; width: 200px; height: 200px; border-radius: 200px 0px; background: -moz-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%); background: -WEBkit-linear-gradient(45deg,rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%); opacity: .6; filter:alpha(opacity=50); transfORM: rotate(135deg); transform-origin: top right;}@keyframes show-2 { 0% { transform: rotate(135deg); } 50% { transform: rotate(45deg); } 100%{ transform: rotate(135deg); }}@keyframes show-3 { 0% { transform: rotate(135deg); } 50% { transform: rotate(65deg); } 100%{ transform: rotate(135deg); }}@keyframes show-4 { 0% { transform: rotate(135deg); } 50% { transform: rotate(85deg); } 100%{ transform: rotate(135deg); }}@keyframes show-5 { 0% { transform: rotate(135deg); } 50% { transform: rotate(105deg); } 100%{ transform: rotate(135deg); }}@keyframes show-6 { 0% { transform: rotate(135deg); } 50% { transform: rotate(165deg); } 100%{ transform: rotate(135deg); }}@keyframes show-7 { 0% { transform: rotate(135deg); } 50% { transform: rotate(185deg); } 100%{ transform: rotate(135deg); }}@keyframes show-8 { 0% { transform: rotate(135deg); } 50% { transform: rotate(205deg); } 100%{ transform: rotate(135deg); }} @keyframes show-9 { 0% { transform: rotate(135deg); } 50% { transform: rotate(225deg); } 100%{ transform: rotate(135deg); }} .leaf:nth-child(1) { background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);}.leaf:nth-child(2) { animation: show-2 6s ease-in-out infinite;}.leaf:nth-child(3) { animation: show-3 6s ease-in-out infinite;}.leaf:nth-child(4) { animation: show-4 6s ease-in-out infinite;}.leaf:nth-child(5) { animation: show-5 6s ease-in-out infinite;}.leaf:nth-child(6) { animation: show-6 6s ease-in-out infinite;}.leaf:nth-child(7) { animation: show-7 6s ease-in-out infinite;}.leaf:nth-child(8) { animation: show-8 6s ease-in-out infinite;}.leaf:nth-child(9) { animation: show-9 6s ease-in-out infinite;}
感谢各位的阅读!关于“CSS3如何实现莲花绽放的动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
--结束END--
本文标题: CSS3如何实现莲花绽放的动画效果
本文链接: https://www.lsjlt.com/news/250974.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0