css实现圣灵动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; html, body { width: 100%; height: 100%; } body { background-color: #140032; overflow: hidden; margin: 0; -webkit-perspective: 1000px; perspective: 1000px; } body *, body *:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .🕊️:nth-child(1) { -webkit-transform: scale(-1, -1); transform: scale(-1, -1); } .🕊️:nth-child(2) { -webkit-transform: scale(1, -1); transform: scale(1, -1); } .👻 { width: 200px; height: 100px; -webkit-animation: 💜 3s ease-in-out infinite; animation: 💜 3s ease-in-out infinite; } .👻:after { content: ""; display: inline-block; width: inherit; height: inherit; border-left: 2px solid transparent; border-right: 2px solid transparent; border-radius: 50%; } .👻:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } .👻:nth-child(1):after { -webkit-transform: rotate(0deg) translate(0px) scaleY(-1); transform: rotate(0deg) translate(0px) scaleY(-1); border-color: #2b00ff; } .👻:nth-child(2) { -webkit-animation-delay: -0.02s; animation-delay: -0.02s; } .👻:nth-child(2):after { -webkit-transform: rotate(-1.8deg) translate(4px) scaleY(-1.02); transform: rotate(-1.8deg) translate(4px) scaleY(-1.02); border-color: #2f00ff; } .👻:nth-child(3) { -webkit-animation-delay: -0.04s; animation-delay: -0.04s; } .👻:nth-child(3):after { -webkit-transform: rotate(-3.6deg) translate(8px) scaleY(-1.04); transform: rotate(-3.6deg) translate(8px) scaleY(-1.04); border-color: #3300ff; } .👻:nth-child(4) { -webkit-animation-delay: -0.06s; animation-delay: -0.06s; } .👻:nth-child(4):after { -webkit-transform: rotate(-5.4deg) translate(12px) scaleY(-1.06); transform: rotate(-5.4deg) translate(12px) scaleY(-1.06); border-color: #3700ff; } .👻:nth-child(5) { -webkit-animation-delay: -0.08s; animation-delay: -0.08s; } .👻:nth-child(5):after { -webkit-transform: rotate(-7.2deg) translate(16px) scaleY(-1.08); transform: rotate(-7.2deg) translate(16px) scaleY(-1.08); border-color: #3c00ff; } .👻:nth-child(6) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } .👻:nth-child(6):after { -webkit-transform: rotate(-9deg) translate(20px) scaleY(-1.1); transform: rotate(-9deg) translate(20px) scaleY(-1.1); border-color: #4000ff; } .👻:nth-child(7) { -webkit-animation-delay: -0.12s; animation-delay: -0.12s; } .👻:nth-child(7):after { -webkit-transform: rotate(-10.8deg) translate(24px) scaleY(-1.12); transform: rotate(-10.8deg) translate(24px) scaleY(-1.12); border-color: #4400ff; } .👻:nth-child(8) { -webkit-animation-delay: -0.14s; animation-delay: -0.14s; } .👻:nth-child(8):after { -webkit-transform: rotate(-12.6deg) translate(28px) scaleY(-1.14); transform: rotate(-12.6deg) translate(28px) scaleY(-1.14); border-color: #4800ff; } .👻:nth-child(9) { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .👻:nth-child(9):after { -webkit-transform: rotate(-14.4deg) translate(32px) scaleY(-1.16); transform: rotate(-14.4deg) translate(32px) scaleY(-1.16); border-color: #4d00ff; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0