css+js实现一个每日剩余时间炸弹倒计时效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现一个每日剩余时间炸弹倒计时效果代码,显示当日剩余时间,警示不要浪费时间。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --fire-width: 50px; --fire-blur: 0; --fire-blur: calc(var(--fire-width) * 0.03); --color-start: orangered; --color-end: yellow; } html { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(to top, #333 40%, #555 40%); } body { position: relative; } body:after { content: ""; width: 300px; height: 50px; background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; border-radius: 50%; transform: translate(-25%, 25%); filter: blur(7px); z-index: -1; } #bomb { width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle at 66% 33%, #555, black 50%); position: relative; display: grid; place-items: center; box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.5); } #bomb:before { content: ""; width: 10px; height: 100px; background: linear-gradient( to bottom right, #630 40%, peru 48%, peru 52%, #630 60% ); background-size: 10px 10px; border-radius: 15px 15px 0 0; position: absolute; left: 100%; top: -8.5%; transform: rotate(50deg); z-index: -1; } #bomb:after { content: ""; width: 100px; height: 100px; background: linear-gradient(to top, black, #222); border-radius: 15px 15px 0 0; position: absolute; left: 75%; top: 0; transform: rotate(50deg); z-index: -1; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } #time { font-family: system-ui, sans-serif; color: white; text-align: center; font-size: 36px; letter-spacing: 3px; line-height: 100%; } #time span { font-size: 20px !important; display: block; margin: 1.25rem 0; font-weight: 100; padding: 1.25rem 0; letter-spacing: 1px; } #time span:nth-child(1) { border-bottom: 1px solid gray; } #time span:nth-child(2) { border-top: 1px solid gray; } #flame_box { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0