div+css实现莲花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现莲花绽放动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang='en' class=''> <head> <style > @charset "UTF-8"; html, body { width: 100%; height: 100%; } body { background-color: #140032; overflow: hidden; margin: 0; } body .lotus, body .lotus *, body .lotus .seed:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; } .lotus:nth-child(1) { transform: rotate(90deg); } .lotus:nth-child(2) { transform: rotate(180deg); } .lotus:nth-child(3) { transform: rotate(270deg); } .lotus:nth-child(4) { transform: rotate(360deg); } .leaf { width: 500px; height: 300px; } .leaf:nth-child(1) { transform: rotate(14.4deg) translate(16.6666666667px) scale(0.0666666667); } .leaf:nth-child(2) { transform: rotate(28.8deg) translate(33.3333333333px) scale(0.1333333333); } .leaf:nth-child(3) { transform: rotate(43.2deg) translate(50px) scale(0.2); } .leaf:nth-child(4) { transform: rotate(57.6deg) translate(66.6666666667px) scale(0.2666666667); } .leaf:nth-child(5) { transform: rotate(72deg) translate(83.3333333333px) scale(0.3333333333); } .leaf:nth-child(6) { transform: rotate(86.4deg) translate(100px) scale(0.4); } .leaf:nth-child(7) { transform: rotate(100.8deg) translate(116.6666666667px) scale(0.4666666667); } .leaf:nth-child(8) { transform: rotate(115.2deg) translate(133.3333333333px) scale(0.5333333333); } .leaf:nth-child(9) { transform: rotate(129.6deg) translate(150px) scale(0.6); } .leaf:nth-child(10) { transform: rotate(144deg) translate(166.6666666667px) scale(0.6666666667); } .leaf:nth-child(11) { transform: rotate(158.4deg) translate(183.3333333333px) scale(0.7333333333); } .leaf:nth-child(12) { transform: rotate(172.8deg) translate(200px) scale(0.8); } .leaf:nth-child(13) { transform: rotate(187.2deg) translate(216.6666666667px) scale(0.8666666667); } .leaf:nth-child(14) { transform: rotate(201.6deg) translate(233.3333333333px) scale(0.9333333333); } .leaf:nth-child(15) { transform: rotate(216deg) translate(250px) scale(1); } .leaf .seed { animation: 3.5s 🪷 linear infinite; animation: 3.5s 🪷 linear infinite; animation: 3.5s 🪷 linear infinite; animation: 3.5s 🪷 linear infinite; animation: 3.5s 🪷 linear infinite; } .leaf .seed:nth-child(1) { animation-delay: calc(-$i * 0.75 / 15); } .leaf .seed:nth-child(1):after { transform: scale(0.1); border-color: rgba(255, 0, 64, 0.9); } .leaf .seed:nth-child(2) { animation-delay: calc(-$i * 0.75 / 15); } .leaf .seed:nth-child(2):after { transform: scale(0.2); border-color: rgba(255, 0, 85, 0.8); } .leaf .seed:nth-child(3) { animation-delay: calc(-$i * 0.75 / 15); } .leaf .seed:nth-child(3):after { transform: scale(0.3); border-color: rgba(255, 0, 106, 0.7); } .leaf .seed:nth-child(4) { animation-delay: calc(-$i * 0.75 / 15); } .leaf .seed:nth-child(4):after { transform: scale(0.4); border-color: rgba(255, 0, 128, 0.6); } .leaf .seed:nth-child(5) { animation-delay: calc(-$i * 0.75 / 15); } .leaf .seed:nth-child(5):after { transform: scale(0.5); border-color: rgba(255, 0, 149, 0.5); } .leaf .seed:after { content: ""; width: inherit; height: inherit; border-top: 10px dotted transparent; border-bottom: 60px dashed transparent; } @keyframes 🪷 { 100% { transform: rotate(360deg); } } </style> </head> <body> <div class='lotus'> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> </div> <div class='lotus'> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> <div class='seed'></div> </div> <div class='leaf'> <div class='seed'></div> <div class='seed'></d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0