css+js实现时钟特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fluid Width Working Clock </title> <style> body { margin: 0; } /* The .page-wrap centers the clock on the page*/ .page-wrap { background-color: #EEE; min-height: 100vh; display: flex; justify-content: center; align-items: center; color: #777; } /* The .container creates spacing around the clock and the viewport edges */ .container { width: 70%; max-width: 600px; min-width: 250px; } /* This div makes sure the clock stays square while adjusting to screen width */ .aspect-ratio-container { width: 100%; height: 0; padding-bottom: 100%; position: relative; } /* This is a background that serves as a border */ .clock-border { position: absolute; width: 100%; height: 100%; box-sizing: border-box; padding: 7%; /* Width of the clock border */ } /* This gives the border and middle button a matching gradient */ .clock-border, .center-button { background-image: linear-gradient(to right, #225378, #1695A3); } /* This gives the border, middle button and hands a matching box-shadow */ .clock-border, .center-button, .clock-hands li { box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2); } /* This rounds everything that should be round */ .clock-border, .clock-face, .clock-face ul { border-radius: 50%; } /* This contains our clock hands and numbers */ .clock-face { position: relative; width: 100%; height: 100%; background-color: #FFF; } /* Style the numbers ul and the hands ul to lay on top of eachother and cover the clock face */ .clock-face ul { margin: 0; padding: 0; list-style: none; position: absolute; width: 100%; height: 100%; } /* Style the numbers as vertical bars that can be rotated around the center of the clock */ .clock-numbers li { height: 45%; /* This plus the top value creates margin between #s and clock edges */ top: 5%; /* This plus the height value needs to add up to 50% */ width: 3rem; text-align: center; font-size: 2rem; font-family: monospace; } /* Add a border radisu for visual effect */ .clock-hands li { border-radius: 5px; } /* Set Clock Numbers to have a fixed width */ .clock-numbers li { } /* Center the clock elements and set them to rotate from the middle of the clock */ .clock-numbers li, .clock-hands li, .clock-ticks li { position: absolute; left: 50%; transform-origin: bottom center; } /* rotate the number containers into place and adjust the digits back so that they're upright */ .clock-numbers li:nth-of-type(1) { transform: translateX(-50%) rotate(30deg); } .clock-numbers li:nth-of-type(1) div { transform: r.........完整代码请登录后点击上方下载按钮下载查看
网友评论0