div+css实现绚丽火焰摆动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现绚丽火焰摆动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; } body { background-color: #140032; overflow: hidden; margin: 0; } body *, body *:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 50%; } .holy:first-child { -webkit-transform: scale(-1, -1); transform: scale(-1, -1); } .motors:nth-child(1) { -webkit-transform: scale(-0.2, 1); transform: scale(-0.2, 1); } .motors:nth-child(2) { -webkit-transform: scale(-0.4, 1); transform: scale(-0.4, 1); } .motors:nth-child(3) { -webkit-transform: scale(-0.6, 1); transform: scale(-0.6, 1); } .motors:nth-child(4) { -webkit-transform: scale(-0.8, 1); transform: scale(-0.8, 1); } .motors:nth-child(5) { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .nothing { width: 30px; height: 30px; } .nothing:nth-child(1) { -webkit-transform: rotate(6deg) translate(200px); transform: rotate(6deg) translate(200px); } .nothing:nth-child(1):after { -webkit-animation-delay: -0.0833333333s; animation-delay: -0.0833333333s; border-color: #ff3300; } .nothing:nth-child(2) { -webkit-transform: rotate(12deg) translate(200px); transform: rotate(12deg) translate(200px); } .nothing:nth-child(2):after { -webkit-animation-delay: -0.1666666667s; animation-delay: -0.1666666667s; border-color: #ff6600; } .nothing:nth-child(3) { -webkit-transform: rotate(18deg) translate(200px); transform: rotate(18deg) translate(200px); } .nothing:nth-child(3):after { -webkit-animation-delay: -0.25s; animation-delay: -0.25s; border-color: #ff9900; } .nothing:nth-child(4) { -webkit-transform: rotate(24deg) translate(200px); transform: rotate(24deg) translate(200px); } .nothing:nth-child(4):after { -webkit-animation-delay: -0.3333333333s; animation-delay: -0.3333333333s; border-color: #ffcc00; } .nothing:nth-child(5) { -webkit-transform: rotate(30deg) translate(200px); transform: rotate(30deg) translate(200px); } .nothing:nth-child(5):after { -webkit-animation-delay: -0.4166666667s; animation-delay: -0.4166666667s; border-color: yellow; } .nothing:nth-child(6) { -webkit-transform: rotate(36deg) translate(200px); transform: rotate(36deg) translate(200px); } .nothing:nth-child(6):after { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; border-color: #ccff00; } .nothing:nth-child(7) { -webkit-transform: rotate(42deg) translate(200px); transform: rotate(42deg) translate(200px); } .nothing:nth-child(7):after { -webkit-animation-delay: -0.5833333333s; animation-delay: -0.5833333333s; border-color: #99ff00; } .nothing:nth-child(8) { -webkit-transform: rotate(48deg) translate(200px); transform: rotate(48deg) translate(200px); } .nothing:nth-child(8):after { -webkit-animation-delay: -0.6666666667s; animation-delay: -0.6666666667s; border-color: #66ff00; } .nothing:nth-child(9) { -webkit-transform: rotate(54deg) translate(200px); transform: rotate(54deg) translate(200px); } .nothing:nth-child(9):after { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; border-color: #33ff00; } .nothing:nth-child(10) { -webkit-transform: rotate(60deg) translate(200px); transform: rotate(60deg) translate(200px); } .nothing:nth-child(10):after { -webkit-animation-delay: -0.8333333333s; animation-delay: -0.8333333333s; border-color: lime; } .nothing:nth-child(11) { -webkit-transform: rotate(66deg) translate(200px); transform: rotate(66deg) translate(200px); } .nothing:nth-child(11):after { -webkit-animation-delay: -0.9166666667s; animation-delay: -0.9166666667s; border-color: #00ff33; } .nothing:nth-child(12) { -webkit-transform: rotate(72deg) translate(200px); transform: rotate(72deg) translate(200px); } .nothing:nth-child(12):after { -webkit-animation-delay: -1s; animation-delay: -1s; border-color: #00ff66; } .nothing:nth-child(13) { -webkit-transform: rotate(78deg) translate(200px); transform: rotate(78deg) translate(200px); } .nothing:nth-child(13):after { -webkit-animation-delay: -1.0833333333s; animation-delay: -1.0833333333s; border-color: #00ff99; } .nothing:nth-child(14) { -webkit-transform: rotate(84deg) translate(200px); transform: rotate(84deg) translate(200px); } .nothing:nth-child(14):after { -webkit-animation-delay: -1.1666666667s; animation-delay: -1.1666666667s; border-color: #00ffcc; } .nothing:nth-child(15) { -webkit-transform: rotate(90deg) translate(200px); transform: rotate(90deg) translate(200px); } .nothing:nth-child(15):after { -webkit-animation-delay: -1.25s; animation-delay: -1.25s; border-color: cyan; } .nothing:nth-child(16) { -webkit-transform: rotate(96deg) translate(200px); transform: rotate(96deg) translate(200px); } .nothing:nth-child(16):after { -webkit-animation-delay: -1.3333333333s; animation-delay: -1.3333333333s; border-color: #00ccff; } .nothing:nth-child(17) { -webkit-transform: rotate(102deg) translate(200px); transform: rotate(102deg) translate(200px); } .nothing:nth-child(17):after { -webkit-animation-delay: -1.4166666667s; animation-delay: -1.4166666667s; border-color: #0099ff; } .nothing:nth-child(18) { -webkit-transform: rotate(108deg) translate(200px); transform: rotate(108deg) translate(200px); } .nothing:nth-child(18):after { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; border-color: #0066ff; } .nothing:nth-child(19) { -webkit-transform: rotate(114deg) translate(200px); transform: rotate(114deg) translate(200px); } .nothing:nth-child(19):after { -webkit-animation-delay: -1.5833333333s; animation-delay: -1.5833333333s; border-color: #0033ff; } .nothing:nth-child(20) { -webkit-transform: rotate(120deg) translate(200px); transform: rotate(120deg) translate(200px); } .nothing:nth-child(20):after { -webkit-animation-delay: -1.6666666667s; animation-delay: -1.6666666667s; border-color: blue; } .nothing:nth-child(21) { -webkit-transform: rotate(126deg) translate(200px); transform: rotate(126deg) translate(200px); } .nothing:nth-child(21):after { -webkit-animation-delay: -1.75s; animation-delay: -1.75s; border-color: #3300ff; } .nothing:nth-child(22) { -webkit-transform: rotate(132deg) translate(200px); transform: rotate(132deg) translate(200px); } .nothing:nth-child(22):after { -webkit-animation-delay: -1.8333333333s; animation-delay: -1.8333333333s; border-color: #6600ff; } .nothing:nth-child(23) { -webkit-transform: rotate(138deg) translate(200px); transform: rotate(138deg) translate(200px); } .nothing:nth-child(23):after { -webkit-animation-delay: -1.9166666667s; animation-delay: -1.9166666667s; border-color: #9900ff; } .nothing:nth-child(24) { -webkit-transform: rotate(144deg) translate(200px); transform: rotate(144deg) translate(200px); } .nothing:nth-child(24):after { -webkit-animation-delay: -2s; animation-delay: -2s; border-color: #cc00ff; } .nothing:nth-child(25) { -webkit-transform: rotate(150deg) translate(200px); transform: rotate(150deg) translate(200px); } .nothing:nth-child(25):after { -webkit-animation-delay: -2.0833333333s; animation-delay: -2.0833333333s; border-color: magenta; } .nothing:nth-child(26) { -webkit-transform: rotate(156deg) translate(200px); transform: rotate(156deg) translate(200px); } .nothing:nth-child(26):after { -webkit-animation-delay: -2.1666666667s; animation-delay: -2.1666666667s; border-color: #ff00cc; } .nothing:nth-child(27) { -webkit-transform: rotate(162deg) translate(200px); transform: rotate(162deg) translate(200px); } .nothing:nth-child(27):after { -webkit-animation-delay: -2.25s; animation-delay: -2.25s; border-color: #ff0099; } .nothing:nth-child(28) { -webkit-transform: rotate(168deg) translate(200px); transform: rotate(168deg) translate(200px); } .nothing:nth-child(28):after { -webkit-animation-delay: -2.3333333333s; animation-delay: -2.3333333333s; border-color: #ff0066; } .nothing:nth-child(29) { -webkit-transform: rotate(174deg) translate(200px); transform: rotate(174deg) translate(200px); } .nothing:nth-child(29):after { -webkit-animation-delay: -2.4166666667s; animation-delay: -2.4166666667s; border-color: #ff0033; } .nothing:nth-child(30) { -webkit-transform: rotate(180deg) translate(200px); transform: rotate(180deg) translate(200px); } .nothing:nth-child(30):after { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; border-color: red; } .nothing:after { content: ""; width: inherit; height: inherit; border-bottom: 2px solid transparent; border-right: 2px solid transparent; -webkit-animation: everything 2.5s ease-in-out infinite; animation: everything 2.5s ease-in-out infinite; } @-webkit-keyframes everything { 50% { -webkit-transform: scale(-2, -2) rotate(-180deg) skew(70deg); transform: scale(-2, -2) rotate(-180deg) skew(70deg); } } @keyframes everything { 50% { -webkit-transform: scale(-2, -2) rotate(-180deg) skew(70deg); transform: scale(-2, -2) rotate(-180deg) skew(70deg); } } </style> </head> <body translate="no" > <div class='holy'> <div class='motors'> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> </div> <div class='motors'> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> <div class='nothing'></div> </div> <div class='motors'> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0