css实现带文字催眠钟摆动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现带文字催眠钟摆动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap'); :root { --background-color: black; --reflect: below 15rem linear-gradient(transparent 70%, white); --reflectB: below 10.5rem linear-gradient(white, transparent 100%); --calcDelay: } @property --pen { syntax: "<angle>"; inherits: false; initial-value: 0deg; } @property --pen2 { syntax: "<angle>"; inherits: false; initial-value: 0deg; } body { padding: 0; margin: 0; min-height: 100vh; display: flex; justify-content: center; overflow: hidden; background: var(--background-color); } .scene { position: relative; max-width: 40rem; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; transform-style: preserve-3d; perspective: 80rem; perspective-origin: center 28rem; h1 { position: absolute; left: 50%; transform: translate(-50%, -5rem); bottom: 0; font-size: 7rem; color: white; mix-blend-mode: darken; font-family: "Monoton", sans-serif; } } .right, .left { transform-style: preserve-3d; perspective: 40rem; i { position: absolute; display: block; width: .5rem; height: 32rem; background: #FAC8C8; //-webkit-box-reflect: var(--reflect); &:before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); border-radius: 50%; width: 3.5rem; aspect-ratio: 1; background: var(--background-color); border: .4rem solid #FAC8C8; //-webkit-box-reflect: var(--reflectB); } } } .left { perspective-origin: 31rem 25rem; i { transform: translateZ(calc((var(--i) - 1) * -3rem)) translateX(calc((var(--i) - 1) * -4rem)) rotate(var(--pen)); transform-origin: top; animation: pendulum 2s ease-in-out infinite alternate; animation-delay: calc(exp(var(--i) / 40) * 1s); } } .right { perspective-origin: -31rem 25rem; i { transform: translateZ(calc((var(--i) - 1) * -3rem)) translateX(calc((var(--i) - 1) * 4rem)) rotate(var(--pen2)); transform-origin: top; animation: pendulum2 2s ease-in-out infinite alternate; animation-delay: calc(exp(var(--i) / 40) * 1s); } } @keyframes pendulum { from { --pen: -40deg; } to { --pen: 40deg; } } @keyframes pendulum2 { from { --pen2: 40deg; } to { --pen2: -40deg; } } </style> </head> <body translate="no"> <div class="scene"> <h1>PENDULUM</h1> <div class="right"> <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> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0