div+css实现陀螺仪动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现陀螺仪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; border: 0; box-sizing: border-box; } body { display: grid; height: 100vh; width: 100vw; overflow: hidden; background: #000; perspective: 400vmin; } .scene, .circles { display: grid; place-self: center; transform-style: preserve-3d; } .scene { transform: rotatex(105deg); -webkit-animation: scene 18.75s 12.5s ease-in-out infinite alternate; animation: scene 18.75s 12.5s ease-in-out infinite alternate; } .circles { -webkit-animation: circles 25s 12.5s ease-in-out infinite alternate; animation: circles 25s 12.5s ease-in-out infinite alternate; } .circles > *:nth-child(1) { --delay: 0s; } .circles > *:nth-child(1)::before { background: conic-gradient(#440a67, #93329e, #b4aee8, #ffe3fe); } .circles > *:nth-child(1)::after { border-top-color: #440a67; border-right-color: #93329e; border-bottom-color: #b4aee8; border-left-color: #ffe3fe; } .circles > *:nth-child(2) { --delay: 0.5208333333s; } .circles > *:nth-child(2)::before { background: conic-gradient(#93329e, #b4aee8, #ffe3fe, #440a67); } .circles > *:nth-child(2)::after { border-top-color: #93329e; border-right-color: #b4aee8; border-bottom-color: #ffe3fe; border-left-color: #440a67; } .circles > *:nth-child(3) { --delay: 1.0416666667s; } .circles > *:nth-child(3)::before { background: conic-gradient(#b4aee8, #ffe3fe, #440a67, #93329e); } .circles > *:nth-child(3)::after { border-top-color: #b4aee8; border-right-color: #ffe3fe; border-bottom-color: #440a67; border-left-color: #93329e; } .circles > *:nth-child(4) { --delay: 1.5625s; } .circles > *:nth-child(4)::before { background: conic-gradient(#ffe3fe, #440a67, #93329e, #b4aee8); } .circles > *:nth-child(4)::after { border-top-color: #ffe3fe; border-right-color: #440a67; border-bot.........完整代码请登录后点击上方下载按钮下载查看
网友评论0