gsap实现雌蕊动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现雌蕊动画效果代码,滚动鼠标试试其他的效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /*30s*/ .zouzou { z-index: -1; overflow: hidden; position: absolute; width: 100vw; height: 100vh; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ad005d; mix-blend-mode: multiply; } .zouzou *, .zouzou *:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; } .un:nth-child(1) { transform: rotate(0deg) translate(7px); } .un:nth-child(2) { transform: rotate(36deg) translate(7px); } .un:nth-child(3) { transform: rotate(72deg) translate(7px); } .un:nth-child(4) { transform: rotate(108deg) translate(7px); } .un:nth-child(5) { transform: rotate(144deg) translate(7px); } .un:nth-child(6) { transform: rotate(180deg) translate(7px); } .un:nth-child(7) { transform: rotate(216deg) translate(7px); } .un:nth-child(8) { transform: rotate(252deg) translate(7px); } .un:nth-child(9) { transform: rotate(288deg) translate(7px); } .un:nth-child(10) { transform: rotate(324deg) translate(7px); } .un .deux:after { content: ""; width: 55px; height: 208px; border-top: 17px double transparent; } .un .deux:nth-child(3) { transform: rotate(0deg) translate(80px); } .un .deux:nth-child(3):after { -webkit-animation: symphony 620s cubic-bezier(0.01, 0, 0.5, 0) infinite; animation: symphony 620s cubic-bezier(0.01, 0, 0.5, 0) infinite; -webkit-animation-delay: 0s; animation-delay: 0s; border-color: rgba(128, 128, 128, 0.61); } .un .deux:nth-child(4) { transform: rotate(24deg) translate(80px); } .un .deux:nth-child(4):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -0.73, 0.5, -0.97) infinite; animation: symphony 620s cubic-bezier(0.01, -0.73, 0.5, -0.97) infinite; -webkit-animation-delay: -115s; animation-delay: -115s; border-color: rgba(172, 110, 83, 0.61); } .un .deux:nth-child(5) { transform: rotate(48deg) translate(80px); } .un .deux:nth-child(5):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -1.46, 0.5, -1.94) infinite; animation: symphony 620s cubic-bezier(0.01, -1.46, 0.5, -1.94) infinite; -webkit-animation-delay: -230s; animation-delay: -230s; border-color: rgba(217, 148, 38, 0.61); } .un .deux:nth-child(6) { transform: rotate(72deg) translate(80px); } .un .deux:nth-child(6):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -2.19, 0.5, -2.91) infinite; animation: symphony 620s cubic-bezier(0.01, -2.19, 0.5, -2.91) infinite; -webkit-animation-delay: -345s; animation-delay: -345s; border-color: rgba(255, 236, 0, 0.61); } .un .deux:nth-child(7) { transform: rotate(96deg) translate(80px); } .un .deux:nth-child(7):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -2.92, 0.5, -3.88) infinite; animation: symphony 620s cubic-bezier(0.01, -2.92, 0.5, -3.88) infinite; -webkit-animation-delay: -460s; animation-delay: -460s; border-color: rgba(196, 255, 0, 0.61); } .un .deux:nth-child(8) { transform: rotate(120deg) translate(80px); } .un .deux:nth-child(8):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -3.65, 0.5, -4.85) infinite; animation: symphony 620s cubic-bezier(0.01, -3.65, 0.5, -4.85) infinite; -webkit-animation-delay: -575s; animation-delay: -575s; border-color: rgba(117, 255, 0, 0.61); } .un .deux:nth-child(9) { transform: rotate(144deg) translate(80px); } .un .deux:nth-child(9):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -4.38, 0.5, -5.82) infinite; animation: symphony 620s cubic-bezier(0.01, -4.38, 0.5, -5.82) infinite; -webkit-animation-delay: -690s; animation-delay: -690s; border-color: rgba(38, 255, 0, 0.61); } .un .deux:nth-child(10) { transform: rotate(168deg) translate(80px); } .un .deux:nth-child(10):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -5.11, 0.5, -6.79) infinite; animation: symphony 620s cubic-bezier(0.01, -5.11, 0.5, -6.79) infinite; -webkit-animation-delay: -805s; animation-delay: -805s; border-color: rgba(0, 255, 40, 0.61); } .un .deux:nth-child(11) { transform: rotate(192deg) translate(80px); } .un .deux:nth-child(11):after { -webkit-animation: symphony 620s cubic-bezier(0.01, -5.84, 0.5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0