div+css实现奥运五环三维摆动转动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现奥运五环三维摆动转动动画效果代码,背后要有阴影。
代码标签: div css 奥运 五环 三维 摆动 转动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; } body { background-image: radial-gradient(circle, #eee, #bbb 500px); min-height: 100vh; display: grid; place-items: center; perspective: 800px; * { transform-style: preserve-3d; } } .rings { position: relative; rotate: x -10deg; } .ring { position: absolute; transform: translate(var(--translate)); &.ring__1 { --ringColor: #0081c8; --duration: 3.2s; --translate: -240px, -40px; } &.ring__2 { --ringColor: #fcb131; --duration: 2.6s; --translate: -120px, 40px; } &.ring__3 { --ringColor: #444444; --duration: 3.0s; --translate: 0, -40px; } &.ring__4 { --ringColor: #00a651; --duration: 3.4s; --translate: 120px, 40px; } &.ring__5 { --ringColor: #ee334e; --duration: 2.8s; --translate: 240px, -40px; } i { --translateZ: calc(var(--i) * 2px); --light: calc(var(--i) / 16); --layerColor: rgb(from var(--ringColor) calc(r * var(--light)) calc(g * var(--light)) calc(b * var(--light))); --size: calc(sin(var(--i) * 11.25deg) * 16px); position: absolute; inset: -100px; border: var(--size) var(--layerColor) solid; outline: var(--size) var(--layerColor) solid; border-radius: 50%; -webkit-animation: ring var(--duration) -10s infinite ease-in-out alternate; animation: ring var(--duration) -10s infinite ease-in-out alternate; } &::after { content: ''; position: absolute; inset: -100px; border: 24px #0003 solid; outline: 24px #0003 solid; border-radius: 50%; translate: 0 -100px -400px; filter: blur(12px); -webkit-animation: ring var(--duration) -10s infinite ease-in-out alternate; animation: ring var(--duration) -10s infinite ease-in-out alternate; } } @-webkit-keyframes ring { from { transform: rotateY(-45deg) translateZ(var(--translateZ, 0)); } to { transform: rotateY(45deg) translateZ(var(--translateZ, 0)); } } @keyframes ring { from { transform: rotateY(-45deg) translateZ(var(--translateZ, 0)); } to { transform: rotateY(45deg) translateZ(var(--translateZ, 0)); } } </style> </head> <body translate="no"> <div class="rings"> <div class="ring ring__1"> <i style="--i: 1;"></i> <i style="--i: 2;"></i> <i style="--i: 3;"></i> <i style="--i: 4;"></i> <i style="--i: 5;"></i> <i style="--i: 6;"></i> <i style="--i: 7;"></i> <i style="--i: 8;"></i> <i style="--i: 9;"></i> <i style="--i: 10;"></i> <i style="--i: 11;"></i> <i style="--i: 12;"></i> <i style="--i: 13;"></i> <i style="--i: 14;"></i> <i style="--i: 15;"></i> <i style="--i: 16;"></i> </div> <div class="ring ring__2"> <i style="--i: 1;"></i> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0