jquery+css实现三维数字滚轮式时间倒计时动画效果代码
代码语言:html
所属分类:其他
代码描述:jquery+css实现三维数字滚轮式时间倒计时动画效果代码
代码标签: jquery css 三维 数字 滚轮 时间 倒计时 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"); body { height: 100vh; margin: 0; display: grid; place-items: center; font-family: "JetBrains Mono", monospace; perspective: 1000px; perspective-origin: calc(50% - 0) calc(50% - 0); background: #f9f9f9; } .holder { width: 350px; height: 200px; display: flex; align-items: center; justify-content: center; flex-direction: row; justify-content: space-between; transform-style: preserve-3d; animation: hold 30s infinite ease-in-out; } .holder:after { content: ""; width: 500px; height: 300px; left: -150px; top: -50px; position: absolute; background: rgba(249, 249, 249, 0.9); filter: blur(20px); } .holder:before { content: ""; width: 200px; height: 100px; left: 0; top: 50px; position: absolute; background: rgba(0, 0, 0, 0.2); transform: translateY(230px) rotateX(90deg); filter: blur(20px); } @keyframes hold { 0%, 100% { transform: rotateY(-30deg) rotateX(-2deg); } 50% { transform: rotateY(38deg) rotateX(8deg); } } .reel { position: relative; transform-style: preserve-3d; } .reel div { position: absolute; text-align: center; width: 50px; height: 100px; font-size: 72px; line-height: 100px; animation: fade 10s infinite linear; } .reel div:nth-child(1) { --left: 0px; transform: translate(-50%, -50%) rotateX(0deg) translateZ(154px); animation-delay: 0s; } .reel div:nth-child(2) { --left: 50px; transform: translate(-50%, -50%) rotateX(36deg) translateZ(154px); animation-delay: 1s; } .reel div:nth-child(3) { --left: 100px; transform: translate(-50%, -50%) rotateX(72deg) translateZ(154px); animation-delay: 2s; } .reel div:nth-child(4) { --left: 150px; transform: translate(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0