雷达扫描效果时钟模拟效果
代码语言:html
所属分类:动画
代码描述:雷达扫描效果时钟模拟效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #e53935; --shadow-color: #0e0e0e; --clock-color: #212121; /*Animations Time*/ --s-animation-time: 10s; --m-animation-time: 60s; --h-animation-time: 20s; /*Real Time in Seconds*/ --s-rotate-time: 60s; --m-rotate-time: 3600s; --h-rotate-time: 43200s; /*Rotate From*/ --s-rotate-from: 0deg; --m-rotate-from: 0deg; --h-rotate-from: 0deg; /*Rotate To*/ --s-rotate-to: 0deg; --m-rotate-to: 0deg; --h-rotate-to: 0deg; } html { font-size: 10px; scroll-behavior: smooth; } @media only screen and (max-width: 500px) { html { font-size: 7px; } } @media only screen and (max-width: 320px) { html { font-size: 5px; } } body { background-color: var(--primary-color); min-height: 100vh; font-family: "Saira Extra Condensed", sans-serif; font-weight: 500; font-size: 1.4rem; text-shadow: 0 0 0.1rem var(--clock-color); } section { background-color: var(--clock-color); min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 10rem; } section.animation:before, section.working:before { font-size: 2rem; color: var(--primary-color); position: absolute; } section.animation:before { content: "Real time \2193"; bottom: 1.5rem; } section.working:before { content: "Animated \2191"; top: 1.5rem; } .clock, .clock-top, .clock-center, .hours-pointer { border-radius: 50%; } .clock { height: 45rem; width: 45rem; min-height: 45rem; min-width: 45rem; padding: 2rem; background-color: var(--clock-color); box-shadow: 1rem 0 2rem 0.5rem var(--shadow-color); -webkit-box-shadow: 1rem 0 2rem 0.5rem var(--shadow-color); -moz-box-shadow: 1rem 0 2rem 0.5rem var(--shadow-color); pos.........完整代码请登录后点击上方下载按钮下载查看
网友评论0