js实现极简时钟走动效果代码
代码语言:html
所属分类:动画
代码描述:js实现极简时钟走动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * Mixin: Center element */ /** * Layout styles */ * { box-sizing: border-box; } html { width: 100%; height: 100%; position: relative; font-size: 16px; background-color: #000000; background: radial-gradient(#535353, #000000); } @media only screen and (min-width: 48rem) { html { font-size: 22px; } } @media only screen and (min-width: 80rem) { html { font-size: 28px; } } /** * Clock styles */ .clock { width: 15rem; height: 15rem; margin: -7.5rem 0 0 -7.5rem; position: absolute; top: 50%; left: 50%; -webkit-box-reflect: below -35px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white)); } @media only screen and (min-width: 48rem) { .clock { -webkit-box-reflect: below -45px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white)); } } @media only screen and (min-width: 80rem) { .clock { -webkit-box-reflect: below -55px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white)); } } .clock .hour-bg, .clock .min-bg, .clock .sec-bg { border: 0.65rem solid #272726; background-color: #272726; box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.5); } .clock .min-bg, .clock .hour-bg { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 6px 10px rgba(0, 0, 0, 0.5); } .clock .sec-bg { box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2), inset 0 6px 10px rgba(0, 0, 0, 0.5); } .clock .hand { border: 0.65rem solid transparent; background-color: transparent; -webkit-transition: all .5s ease; transition: all .5s ease; } .clock .hand:after { display: block; content: ''; width: 0.15rem; height: 1.5rem; margin: 0; position: absolute; background-color: #F7C393; top: 0; left: 50%; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.25); } .clock:after { content: ''; display: block; position: absolute; left: 50%; bottom: 15px; margin-left: -125px; border-radius: 150px; height: 100px; width: 250px; -webkit-transform: scaleY(0.19); transform: scaleY(0.19); box-shadow: 0px 250px 20px -15px rgba(0, 0, 0, 0.05), 0px 250px 20px -55px rgba(255, 255, 255, 0.05); } /** * Clock hand centering */ .seconds, .sec-bg { width: 13rem; height: 13rem; margin: -6.5rem 0 0 -6.5rem; position: absolute; top: 50%; left: 50%; border-radius: 13rem; } .minutes, .min-bg { width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; position: absolute; top: 50%; left: 50%; border-radius: 9rem; } .hour, .hour-bg { width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem; position: absolute; top: 50%; left: 50%; border-radius: 4.5rem; } </style> </head> <body> <!-- Clock --> <div class="clock"> <!-- Seconds --> <div class="sec-bg"> <div class="hand seconds"></div> </div> <!-- Minutes --> <div class="min-bg"> <div class="hand minutes"></div> </div> <!-- Hours --> <div class="hour-bg"> <div class="hand hour"></div> </div> </div> <script > /** * "Broken Line" Minimalist Clock * Based on Lukas Avenas "Broken Line" * https://www.behance.net/gallery/28569407/broken-line * @author Mike King (@micjamking) */ (function () { 'use strict'; /** * Creates a new clock * @constructor */ function Cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0