js定时器实现时钟走动动画效果
代码语言:html
所属分类:动画
代码描述:js定时器实现时钟走动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #212121; } .clock { display: flex; width: 350px; height: 350px; justify-content: center; align-items: center; background: url(http://repo.bfw.wiki/bfwrepo/image/5f5ff3aa7526f.png); background-size: cover; border: 4px solid #191919; border-radius: 50%; box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5), inset 4px 4px 10px rgba(0, 0, 0, 0.5), inset -4px -4px 10px rgba(67, 67, 67, 0.3), 4px 4px 10px rgba(0, 0, 0, 0.3); } .clock:before { content: ""; position: absolute; width: 15px; height: 15px; background: #747474; border-radius: 50%; z-index: 999; } .clock .hour, .clock .min, .clock .sec { position: absolute; } .clock .hour, .hr { width: 160px; height: 160px; } .clock .min, .mn { width: 190px; height: 190px; } .clock .sec, .sc { width: 230px; height: 230px; } .hr, .mn, .sc { display: flex; justify-content: center; /*align-items: center;*/ position: absolute; border-radius: 50%; } .hr:before { content: ""; position: absolute; width: 8px; height: 80px; background: #ffb510; z-index: 9; border-radius: 6px 6px 0 0; } .mn:before { content: ""; position: absolute; width: 4px; height: 90px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0