css+js实现可爱小清新时钟走动显示时间代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现可爱小清新时钟走动显示时间代码
代码标签: css js 可爱 小清新 时钟 走动 显示 时间 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } html * { box-sizing: inherit; } body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(192,223,236); } .container { position: relative; margin: auto; display: block; width: 484px; height: 484px; margin-top: 10% } .container::after { content: ""; position: absolute; mix-blend-mode: color-dodge; width: 450px; height: 150px; top: 20px; left: -700px; animation: window-2 25000ms linear 0s 1 normal; } @keyframes window-2 { 0% { background-color: rgba(255,255,255, 0.2); top: 30%; left: -500px; } 100% { background-color: rgba(255,255,255, 0.2); top: 30%; left: -200px; } } .container::before { content: ""; position: absolute; mix-blend-mode: color dodge; width: 450px; height: 350px; top: -300px; left: -700px; animation: window-1 25000ms linear 0s 1 normal; } @keyframes window-1 { 0% { background-color: rgba(255,255,255, 0.2); top: -250px; left: -500px; } 100% { background-color: rgba(255,255,255, 0.2); top: -250px; left: -200px; } } .clockbase { width: 300px; height: 300px; border-radius: 100%; border: solid rgb(216,236,223) 25px; background-color: rgb(252, 255, 243); position: relative; top: 24px; left: 18px; } .clockbase::after { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50% 50%; border: solid rgb(239,247,212) 15px; top: -11%; left: -11%; } .clockbase-design { position: absolute; width: 245px; height: 245px; border-radius: 50% 50%; border: dotted rgb(216,236,223) 4.6px; top: 51px; left: 45px; z-index: 2px; transform: rotate(18.8deg) } .tip { width: 5px; height: 252px; position: absolute; top: 49px; left: 164.5px; border-top: solid rgb(216,236,223) 20px; border-bottom: solid rgb(216,236,223) 20px; } .tip:after { content: ""; width: 215px; height: 5px; position: absolute; top: 103px; left: -125px; border-left: solid rgb(216,236,223) 20px; border-right: solid rgb(216,236,223) 20px; } .hours { position: absolute; width: 8px; height: 50px; background-color: rgb(169,211,247); top: 123.5px; left: 162px; transform-origin: center bottom } .minutes { position: absolute; width: 5px;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0