css实现原子运动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现原子运动动画效果代码,原子核周围围绕原子运行。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-image: radial-gradient(circle, #123, #000); min-height: 100vh; display: grid; place-items: center; perspective: 50em; overflow: hidden; * { transform-style: preserve-3d; } } .scene { position: relative; } .atoms { &:nth-child(2) { translate: -50em 0 -50em; rotate: 120deg; } &:nth-child(3) { translate: 50em 0 -50em; rotate: 240deg; } } .atom { --duration: 60s; --r: 25em; --atomHue: calc(var(--a) * 60); --delay: calc(var(--duration) / -18 * var(--a, 0)); position: absolute; -webkit-animation: atom calc(var(--duration) * 1) var(--delay, 0s) infinite linear; animation: atom calc(var(--duration) * 1) var(--delay, 0s) infinite linear; &::after { content: ''; position: absolute; inset: -3em; background-image: radial-gradient(circle at 25% 25%, hsl(var(--atomHue) 100% 80%), hsl(var(--atomHue) 100% 10%)); border-radius: 50%; box-shadow: 0 0 1em #0007; } i { --duration: 16s; --r: 5em; --delay: calc(var(--duration) / -3 * var(--i, 0) - var(--a) * 0.7s); --iHue: calc((var(--i, 0) * 5) + var(--atomHue) + 30); position: absolute; inset: -1em; background-image: radial-gradient(circle at 25% 25%, hsl(var(--iHue, calc(var(--atomHue) + 180)) 100% 80%), hsl(var(--iHue, calc(var(--atomHue) + 180)) 100% 10%)); border-radius: 50%; box-shadow: 0 0 1em #0007; -webkit-animation: atom var(--duration) var(--delay, 0s) infinite linear; animation: atom var(--duration) var(--delay, 0s) infinite linear; &:nth-child(2) { --i: 1; } &:nth-child(3) { --i: 2; } } } @-webkit-keyframes atom { from { transform: rotateZ(0deg) rotateY(0deg) translateZ(var(--r)) rotateY(2880deg) rotateZ(360deg); } to { transform: rotateZ(360deg) rotateY(2880deg) translateZ(var(--r)) rotateY(0deg) rotateZ(0deg); } } @keyframes atom { from { transform: rotateZ(0deg) rotateY(0deg) translateZ(var(--r)) rotateY(2880deg) rotateZ(360deg); } to { transform: rotateZ(360deg) rotateY(2880deg) translateZ(var(--r)) rotateY(0deg) rotateZ(0deg); } } </style> </head> <body translate="no"> <div class="scene"> <div class="atoms"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0