react实现飞入式数字时钟动画效果代码
代码语言:html
所属分类:动画
代码描述:react实现飞入式数字时钟动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet"> <style> #youtube-link { align-items: center; border-radius: 6px; display: flex; gap: 10px; left: 50%; padding: 10px; pointer-events: all; position: absolute; text-decoration: none; top: 10px; transform: translateX(-50%); white-space: nowrap; z-index: 100; } #youtube-link:hover, #youtube-link:focus { backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.1); } #youtube-link i, #youtube-link h1 { height: 20px; line-height: 20px; } #youtube-link i { color: #c62828; font-size: 1.25em; } #youtube-link h1 { color: white; font-size: 1em; } body { background-color: #1e1e1e; margin: 0px; overflow: hidden; padding: 0px; } body input, body h1, body a, body span { color: #5a5a5a; font-family: "Rubik", sans-serif; font-weight: 400; margin: 0px; padding: 0px; } #app { align-items: center; display: flex; height: 100vh; justify-content: center; width: 100vw; } #app #timer { background: linear-gradient(to bottom right, #0263e1, #eb1836); border-radius: 22px; } #app #timer #timer-text { align-items: center; background-color: #1e1e1e; border-radius: 20px; display: flex; margin: 4px; padding: 0px 20px; } #app #timer #timer-text .timer-char { height: 150px; position: relative; text-align: center; width: 80px; } #app #timer #timer-text .timer-char.colon { color: white; font-size: 8em; line-height: 150px; } #app #timer #timer-text .timer-char .timer-char-slider { display: flex; flex-direction: column; left: 0px; position: absolute; top: 0px; transition: top 200ms; width: 80px; } #app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option { color: white; font-size: 4em; height: 150px; line-height: 150px; opacity: 0.05; transition: opacity 400ms, font-size 400ms; width: 80px; } #app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option.active { font-size: 8em; opacity: 1; } @media (max-width: 800px) { #app #timer { border-radius: 16px; } #app #timer #timer-text { border-radius: 14px; margin: 4px; padding: 0px 12px; } #app #timer #timer-text .timer-char { height: 80px; width: 40px; } #app #timer #timer-text .timer-char.colon { font-size: 4em; line-height: 80px; } #app #timer #timer-text .timer-char .timer-char-slider { width: 40px; } #app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option { font-size: 2em; height: 80px; line-height: 80px; width: 40px; } #app #timer #timer-text .timer-char .timer-char-slider .timer-char-slider-option.active { font-size: 4em; } } @media (max-width: 400px) { #app #timer { border-radius: 8px; } #app #timer #timer-text { border-radius: 6px; margin: 2px; paddin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0