jquery实现带刻度的时间时钟走动效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现带刻度的时间时钟走动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> @import url("https://fonts.googleapis.com/css?family=BenchNine:300,400"); *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { background: #222; overflow: hidden; font-family: 'BenchNine', sans-serif; } .clock-container { position: fixed; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 480px; height: 480px; border-radius: 50%; overflow: hidden; background: #111; -webkit-box-shadow: 0 0 25px 3px #000, 0 0 10px rgba(0, 0, 0, 0.8) inset; box-shadow: 0 0 25px 3px #000, 0 0 10px rgba(0, 0, 0, 0.8) inset; } .clock-container .spear { position: absolute; width: 220px; height: 1px; background: red; left: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 200; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } .clock-container .spear:after { content: ''; position: absolute; border: 7px solid transparent; border-right-color: red; right: 0; top: -7px; } .clock-container .spear:before { content: ''; position: absolute; border: 7px solid transparent; border-left-color: red; left: 2px; top: -7px; } .clock-container .clock-analog { width: 440px; height: 440px; border-radius: 50%; margin: 20px; background: #fff; z-index: 5; position: relative; -webkit-box-shadow: 0 0 25px 3px #000 inset; box-shadow: 0 0 25px 3px #000 inset; } .clock-container .clock-analog .second, .clock-container .clock-analog .minute, .clock-container .clock-analog .hour { width: 20px; height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 100; -webkit-transition: 0.2s 0.2s ease-in; transition: 0.2s 0.2s ease-in; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .clock-container .clock-analog .second span, .clock-container .clock-analog .minute span, .clock-container .clock-analog .hour span { position: absolute; width: 20px; height: 20px; line-height: 20px; text-align: center; -webkit-transform-origin: 50%; transform-origin: 50%; z-index: 5; } .clock-container .clock-analog .second span:after, .clock-container .clock-analog .minute span:after, .clock-container .clock-analog .hour span:after { content: ''; width: 4px; height: 1px; background: #000; position: absolute; left: 130%; top: -10%; opacity: 0.3; } .clock-container .clock-analog .second span:nth-child(5n + 2):after, .clock-container .clock-analog .minute span:nth-child(5n + 2):after, .clock-container .clock-analog .hour span:nth-child(5n + 2):after { width: 7px; opacity: 1; left: 110%; } .clock-container .clock-analog .hour { z-index: 150; font-size: 32px; font-weight: 400; } .clock-container .clock-analog .hour span:after { opacity: 1; width: 4px; height: 1px; color: #666; -webkit-transform: translate(5px, 12px); transform: translate(5px, 12px); } .clock-container .clock-analog .hour:after { content: ''; background: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 250px; height: 250px; border-radius: 50%; -webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.6) inset; box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.6) inset; } .clock-container .clock-analog .minute { color: #fff; font-size: 16px; } .clock-container .clock-analog .minute span:after { background: #fff; -webkit-transform: translate(10px, -7px) rotate(-9deg); transform: translate(10px, -7px) rotate(-9deg); } .clock-container .clock-analog .minute:after { content: ''; background: #333; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 350px; height: 350px; border-radius: 50%; -webkit-box-shadow: 0 0 25px 2px #000 inset; box-shadow: 0 0 25px 2px #000 inset; } .clock-container .clock-analog .second { font-size: 12px; } .clock-container .clock-analog .second span:after { -webkit-transform: translate(5px, -10px); transform: translate(5px, -10px); } .clock-container .clock-analog .dail { width: 20px; height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 100; } .clock-container .clock-analog .dail span { width: 20px; height: 20px; line-height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; text-indent: 1000px; overflow: hidden; position: absolute; } .clock-container .clock-analog .dail span:after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #7d7e7d; *z.........完整代码请登录后点击上方下载按钮下载查看
网友评论0