js实现一个简洁黄色时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现一个简洁黄色时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> /*------------∞ | reset.css | ∞------------*/ /* ∞∞ postcss ∞∞ */ /* ∞∞ font ∞∞ */ @import url(https://fonts.googleapis.com/css?family=Lato:300,900); body { font-family: 'Lato', sans-serif; } /* ∞∞ global ∞∞ */ * { position: relative; margin: 0; padding: 0; box-sizing: border-box; border-color: inherit; } body { width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: scroll; font-size: 100%; font-style: normal; font-weight: 300; line-height: 1; margin: 0; padding: 0; } /* ∞∞ text styling ∞∞ */ h1, h2, h3, h4, h5, h6, p, em, a, b, strong { font-style: normal; font-weight: 300; } strong { font-size: 1.15em; } small { font-size: .85em; } ul, ol, menu { list-style: none; } sub, sup { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } abbr[title] { border-bottom: 1px dotted; } dfn { font-style: italic; } /* ∞∞ form elements ∞∞ */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; background: transparent; outline: none; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } button, select { text-transform: none; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } fieldset { border: none; margin: 0; padding: 0; min-width: 0; } textarea { resize: none; } /* ∞∞ link styling ∞∞ */ a { display: inline; text-decoration: none; color: inherit; cursor: pointer; } a:active, a:hover { outline: 0; } /* a::before { width: 100%; height: .2rem; position: absolute; bottom: 0; left: 0; background-color: #7ac; } a:hover::before { background-color: #49e; height: .35rem; } */ /* ∞∞ hr using box ∞∞ */ hr { border: none; box-sizing: border-box; height: .075rem; } /* ∞∞ hidden ∞∞ */ [hidden], template { display: none; } /* ∞∞ media specific ∞∞ */ audio:not([controls]) { display: none; height: 0; } /* ∞∞ tables ∞∞ */ table { border-collapse: collapse; border-spacing: 0; border: none; } td, th { margin: 0; padding: 0; font-weight: inherit; text-align: inherit; } /*====================================================== ∞∞ browser specific ∞∞ */ /* ∞∞ IE ∞∞ */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } a { background-color: transparent; } button { overflow: visible; } html { -ms-text-size-adjust: 100%; } img { border: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } legend { border: none; padding: 0; } mark { background: #ff0; color: #000; } svg:not(:root) { overflow: hidden; } textarea { overflow: auto; } /* ∞∞ moz ∞∞ */ body { -moz-osx-font-smoothing: grayscale; } button::-moz-focus-inner, input::-moz-focus-inner { border: none; padding: 0; } input { line-height: normal; } /* ∞∞ webkit ∞∞ */ * { -webkit-margin-before: 0; -webkit-margin-after: 0; } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased !important; } blockquote { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } fieldset { -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-before: 0; -webkit-padding-start: 0; -webkit-padding-end: 0; -webkit-padding-after: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; height: auto; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, progress { -webkit-appearance: none; } body { background: -webkit-linear-gradient(180deg, #2FC5BA, #62C6C9, #2FC5BA); background: linear-gradient(-90deg, #2FC5BA, #62C6C9, #2FC5BA) } i { font-style: normal; font-weight: bold; font-size: 14px; } h2, h3 { font-size: 7px; letter-spacing: 1px; font-variant: small-caps; position: absolute; left: 50%; top: 32%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } h2 { font-size: 8px; top: 29%; letter-spacing: 3px; font-weight: bold; } .date { font-size: 8px; width: 32px; height: 9px; background-color: #F6EEE8; border-radius: 2px; text-align: center; position: absolute; left: 50%; bottom: 27%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } section.border-clock { background-color: #EBEB83; width: 300px; height: 300px; border: 10px solid #F4F48E; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 15px 15px 35px -10px #488893; } section.clock { width: 272px; height: 272px; background-color: #FDFAF7; border: 2px solid #E5E375; border-radius: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } section.clock div.minutes, section.clock div.hours, section.clock div.seconds { width: 1px; height: 1px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } section.clock div.minutes { -webkit-transition: -webkit-transform 1s linear; transition: -webkit-transform 1s linear; transition: transform 1s linear; transition: transform 1s linear, -webkit-transform 1s linear } section.clock div.seconds::before, section.clock div.minutes::before, section.clock div.hours::before { content: ""; position: absolute; bottom: 50%; left: 50%; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } section.clock div.seconds::before { width: 1px; height: 113px; background-color: #EB6444; } section.clock div.minutes::before { width: 3px; height: 105px; background-color: #68C3D4; border-radius: 3px; } section.clock div.h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0