css+js实现清爽带阴影弹力式滚动数字时钟效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现清爽带阴影弹力式滚动数字时钟效果代码
代码标签: css js 清爽 阴影 弹力式 滚动 数字 时钟
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); --trans-dur: 0.3s; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 "DM Sans", sans-serif; height: 100vh; display: grid; place-items: center; transition: background-color var(--trans-dur), color var(--trans-dur); } .clock { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; } .clock__block { background-color: hsl(var(--hue),10%,90%); border-radius: 0.5rem; box-shadow: 0 1rem 2rem hsla(var(--hue),90%,50%,0.3); font-size: 3em; line-height: 2; margin: 0.75rem; overflow: hidden; text-align: center; width: 6rem; height: 6rem; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); } .clock__block--small { border-radius: 0.25rem; box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,50%,0.3); font-size: 1em; line-height: 3; width: 3rem; height: 3rem; } .clock__colon { display: none; font-size: 2em; opacity: 0.5; position: relative; } .clock__colon:before, .clock__colon:after { background-color: currentColor; border-radius: 50%; content: ""; display: block; position: absolute; top: -0.05em; left: -0.05em; width: 0.1em; height: 0.1em; transition: background-color var(--trans-dur); } .clock__colon:before { transform: translateY(-200%); } .clock__colon:after { transform: translateY(200%); } .clock__digit-group { display: flex; flex-direction: column-reverse; } .clock__digits { width: 100%; height: 100%; } .clock__block--bounce { animation: bounce 0.75s; } .clock__block--bounce .clock__digit-group { animation: roll 0.75s ease-in-out forwards; transform: translateY(-50%); } .clock__block--delay1, .clock__block--delay1 .clock__digit-group { animation-delay: 0.1s; } .clock__block--delay2, .clock__block--delay2 .clock__digit-group { animation-delay: 0.2s; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); } .clock__block { background-color: hsl(var(--hue),90%,40%); box-shadow: 0 1rem 2rem hsla(var(--hue),90%,60%,0.4); } .clock__block--small { box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,60%,0.4); } } /* Beyond mobile */ @media (min-width: 768px) { .clock { flex-direction: row; } .clock__colon { display: inherit; } } /* Animations */ @keyframes bounce { from, to { animation-timing-function: ease-in; transform: translateY(0); } 50% { animation-timing-function: ease-out; transform: translateY(15%); } } @keyframes roll { from { transform: translateY(-50%); } to { transform: translateY(0); } } </style> </head> <body > <div class="clock" aria-label="00:00:00 AM"> <div class="clock__block clock__block--delay2" aria-hidden="true" data-time-group> <div class="clock__digit-group"> <div class="clock__digits" data-time="a">00</div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0