css+div实现光芒四射旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现光芒四射旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #171c1a; margin: 400px; overflow: hidden; } body div { -webkit-animation: anim 3s infinite; animation: anim 3s infinite; border-radius: 50%; opacity: 0; position: absolute; width: 12px; height: 12px; } div:nth-child(1) { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; background: radial-gradient(white, #f5503d); box-shadow: 0 0 10px #f5503d; transform: perspective(10px) rotate(6deg) translate3d(60%, 60%, 0) rotateY(60deg); } div:nth-child(2) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; background: radial-gradient(white, #f5623d); box-shadow: 0 0 10px #f5623d; transform: perspective(10px) rotate(12deg) translate3d(120%, 120%, 0) rotateY(120deg); } div:nth-child(3) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; background: radial-gradient(white, #f5743d); box-shadow: 0 0 10px #f5743d; transform: perspective(10px) rotate(18deg) translate3d(180%, 180%, 0) rotateY(180deg); } div:nth-child(4) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; background: radial-gradient(white, #f5873d); box-shadow: 0 0 10px #f5873d; transform: perspective(10px) rotate(24deg) translate3d(240%, 240%, 0) rotateY(240deg); } div:nth-child(5) { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; background: radial-gradient(white, #f5993d); box-shadow: 0 0 10px #f5993d; transform: perspective(10px) rotate(30deg) translate3d(300%, 300%, 0) rotateY(300deg); } div:nth-child(6) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; background: radial-gradient(white, #f5ab3d); box-shadow: 0 0 10px #f5ab3d; transform: perspective(10px) rotate(36deg) translate3d(360%, 360%, 0) rotateY(360deg); } div:nth-child(7) { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; background: radial-gradient(white, #f5be3d); box-shadow: 0 0 10px #f5be3d; transform: perspective(10px) rotate(42deg) translate3d(420%, 420%, 0) rotateY(420deg); } div:nth-child(8) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; background: radial-gradient(white, #f5d03d); box-shadow: 0 0 10px #f5d03d; transform: perspective(10px) rotate(48deg) translate3d(480%, 480%, 0) rotateY(480deg); } div:nth-child(9) { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; background: radial-gradient(white, #f5e23d); box-shadow: 0 0 10px #f5e23d; transform: perspective(10px) rotate(54deg) translate3d(540%, 540%, 0) rotateY(540deg); } div:nth-child(10) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; background: radial-gradient(white, #f5f53d); box-shadow: 0 0 10px #f5f53d; transform: perspective(10px) rotate(60deg) translate3d(600%, 600%, 0) rotateY(600deg); } div:nth-child(11) { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; background: radial-gradient(white, #e2f53d); box-shadow: 0 0 10px #e2f53d; transform: perspective(10px) rotate(66deg) translate3d(660%, 660%, 0) rotateY(660deg); } div:nth-child(12) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; background: radial-gradient(white, #d0f53d); box-shadow: 0 0 10px #d0f53d; transform: perspective(10px) rotate(72deg) translate3d(720%, 720%, 0) rotateY(720deg); } div:nth-child(13) { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; background: radial-gradient(white, #bef53d); box-shadow: 0 0 10px #bef53d; transform: perspective(10px) rotate(78deg) translate3d(780%, 780%, 0) rotateY(780deg); } div:nth-child(14) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; background: radial-gradient(white, #abf53d); box-shadow: 0 0 10px #abf53d; transform: perspective(10px) rotate(84deg) translate3d(840%, 840%, 0) rotateY(840deg); } div:nth-child(15) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; background: radial-gradient(white, #99f53d); box-shadow: 0 0 10px #99f53d; transform: perspective(10px) rotate(90deg) translate3d(900%, 900%, 0) rotateY(900deg); } div:nth-child(16) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; background: radial-gradient(white, #87f53d); box-shadow: 0 0 10px #87f53d; transform: perspective(10px) rotate(96deg) translate3d(960%, 960%, 0) rotateY(960deg); } div:nth-child(17) { -webkit-animation-delay: 0.85s; animation-delay: 0.85s; background: radial-gradient(white, #74f53d); box-shadow: 0 0 10px #74f53d; transform: perspective(10px) rotate(102deg) translate3d(1020%, 1020%, 0) rotateY(1020deg); } div:nth-child(18) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; background: radial-gradient(white, #62f53d); box-shadow: 0 0 10px #62f53d; transform: perspective(10px) rotate(108deg) translate3d(1080%, 1080%, 0) rotateY(1080deg); } div:nth-child(19) { -webkit-animation-delay: 0.95s; animation-delay: 0.95s; background: radial-gradient(white, #50f53d); box-shadow: 0 0 10px #50f53d; transform: perspective(10px) rotate(114deg) translate3d(1140%, 1140%, 0) rotateY(1140deg); } div:nth-child(20) { -webkit-animation-delay: 1s; animation-delay: 1s; background: radial-gradient(white, #3df53d); box-shadow: 0 0 10px #3df53d; transform: perspective(10px) rotate(120deg) translate3d(1200%, 1200%, 0) rotateY(1200deg); } div:nth-child(21) { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; background: radial-gradient(white, #3df550); box-shadow: 0 0 10px #3df550; transform: perspective(10px) rotate(126deg) translate3d(1260%, 1260%, 0) rotateY(1260deg); } div:nth-child(22) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; background: radial-gradient(white, #3df562); box-shadow: 0 0 10px #3df562; transform: perspective(10px) rotate(132deg) translate3d(1320%, 1320%, 0) rotateY(1320deg); } div:nth-child(23) { -webkit-animation-delay: 1.15s; animation-delay: 1.15s; background: radial-gradient(white, #3df574); box-shadow: 0 0 10px #3df574; transform: perspective(10px) rotate(138deg) translate3d(1380%, 1380%, 0) rotateY(1380deg); } div:nth-child(24) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; background: radial-gradient(white, #3df587); box-shadow: 0 0 10px #3df587; transform: perspective(10px) rotate(144deg) translate3d(1440%, 1440%, 0) rotateY(1440deg); } div:nth-child(25) { -webkit-animation-delay: 1.25s; animation-delay: 1.25s; background: radial-gradient(white, #3df599); box-shadow: 0 0 10px #3df599; transform: perspective(10px) rotate(150deg) translate3d(1500%, 1500%, 0) rotateY(1500deg); } div:nth-child(26) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; background: radial-gradient(white, #3df5ab); box-shadow: 0 0 10px #3df5ab; transform: perspective(10px) rotate(156deg) translate3d(1560%, 1560%, 0) rotateY(1560deg); } div:nth-child(27) { -webkit-animation-delay: 1.35s; animation-delay: 1.35s; background: radial-gradient(white, #3df5be); box-shadow: 0 0 10px #3df5be; transform: perspective(10px) rotate(162deg) translate3d(1620%, 1620%, 0) rotateY(1620deg); } div:nth-child(28) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; background: radial-gradient(white, #3df5d0); box-shadow: 0 0 10px #3df5d0; transform: perspective(10px) rotate(168deg) translate3d(1680%, 1680%, 0) rotateY(1680deg); } div:nth-child(29) { -webkit-animation-delay: 1.45s; animation-delay: 1.45s; background: radial-gradient(white, #3df5e2); box-shadow: 0 0 10px #3df5e2; transform: perspective(10px) rotate(174deg) translate3d(1740%, 1740%, 0) rotateY(1740deg); } div:nth-child(30) { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; background: radial-gradient(white, #3df5f5); box-shadow: 0 0 10px #3df5f5; transform: perspective(10px) rotate(180deg) translate3d(1800%, 1800%, 0) rotateY(1800deg); } div:nth-child(31) { -webkit-animation-delay: 1.55s; animation-delay: 1.55s; background: radial-gradient(white, #3de2f5); box-shadow: 0 0 10px #3de2f5; transform: perspective(10px) rotate(186deg) translate3d(1860%, 1860%, 0) rotateY(1860deg); } div:nth-child(32) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; background: radial-gradient(white, #3dd0f5); box-shadow: 0 0 10px #3dd0f5; transform: perspective(10px) rotate(192deg) translate3d(1920%, 1920%, 0) rotateY(1920deg); } div:nth-child(33) { -webkit-animation-delay: 1.65s; animation-delay: 1.65s; background: radial-gradient(white, #3dbef5); box-shadow: 0 0 10px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0