css+js实现支持暗色与亮色切换的时钟走动显示时间效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现支持暗色与亮色切换的时钟走动显示时间效果代码
代码标签: css js 暗色 亮色 切换 时钟 走动 显示 时间
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * , *:after , *:before{ padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body{ background-image: url('//repo.bfw.wiki/bfwrepo/image/62fd789243ca2.png'); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100vh; display: grid; justify-content: center; align-items: center; } .main-color{ background-color: #1696D5; } .second-color{ background-color:#582733; } /* START CLOCK STYLE */ .clock{ height: 400px; width: 400px; border: 5px solid #000; border-radius: 50%; position: relative; text-align: center; background-color: #181717; box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8); } .clock .dot{ width: 20px; height: 20px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 4; } .clock .twelve { position: absolute; width: 3px; height: 15px; left: 0; top: 0; right: 0; margin: 0 auto; } .clock .two { position: absolute; width: 15px; height: 3px; right: 10px; margin:auto 0; } .clock .three { position: absolute; width: 15px; height: 3px; top: 0; bottom: 0; right: 0; margin: auto 0; } .clock .six{ position: absolute; width: 3px; height: 15px; left: 0; bottom: 0; right: 0; margin: 0 auto; } .clock .nine{ position: absolute; width: 15px; height: 3px; top: 0; bottom: 0; left: 0; margin: auto 0; } .clock .line{ position: absolute; top: 0; left: 0; right: 0; margin: auto; transform-origin: bottom; border-top-left-radius: 50%; border-top-right-radius: 50%; } .clock #secLine{ height: 170px; width: 3px; bottom: 170px; z-index: 3; } .clock #minLine{ width: 7px; height: 120px; bottom: 120px; transform-origin: bottom; z-index: 2; } .clock #hourLine{ width: 10px; height: 80px; bottom: 80px; z-index: 1; } /* START LINKS STYLE */ button{ background-color: #1696D5; border: none; outline: none; color: #fff; padding: 10px 30px; width: 40%; margin: 0 auto; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0