jquery实现带数字时间的时钟走动效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现带数字时间的时钟走动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <style> body,div,p { font-family: 'Microsoft Yahei'; font-size: 14px; } .box { width: 400px; height: 400px; border: 10px solid #8bf2f1; margin: 30px auto; border-radius: 50%; box-shadow: 0px 0px 20px 3px #444 inset; position: relative; } /*原点*/ .origin { width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top: 190px; left: 190px; position: absolute; } /* 指针 */ .clock_line { position: absolute; position: absolute; z-index: 20; } .hour_line { width: 100px; height: 4px; top: 198px; left: 200px; background-color: #000; border-radius: 2px; transform-origin: 0 50%; box-shadow: 1px -3px 8px 3px #aaa; } .minute_line { width: 130px; height: 2px; top: 199px; left: 190px; background-color: #000; transform-origin: 7.692% 50%; box-shadow: 1px -3px 8px 1px #aaa; } .second_line { width: 170px; height: 1px; top: 199.5px; left: 180px; background-color: #f60; transform-origin: 11.765% 50%; box-shadow: 1px -3px 7px 1px #bbb; } .dot_box { width: inherit; height: inherit; } /*时钟数*/ .dot { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0