css+js实现一个质感立体时钟走动显示时间效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现一个质感立体时钟走动显示时间效果代码
代码标签: css js 质感 立体 时钟 走动 显示 时间
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing:border-box; } body { background:rgb(29,27,36); padding:0; margin:0; font-family:sans-serif; font-size:16px; display:flex; justify-content:center; align-items:center; flex-direction:column; width:100%; height:100vh; } h1 { background:linear-gradient(tomato,rgb(212,40,40)); font-size:2.8em; } .heading { background-clip:text; -webkit-background-clip:text; color:rgba(0,0,0,.2); } .clock-body { width:550px; height:550px; border-radius:20%; background:tomato; display:flex; justify-content:center; align-items:center; box-shadow:inset 1px 10px 40px 40px rgb(212,40,40); margin:0 1em; } .clock { width:400px; height:400px; border-radius:50%; background:rgb(60,60,78); border:30px solid rgba(212,40,40,1); display:flex; justify-content:center; align-items:center; box-shadow:inset 5px 5px 50px 20px black; } .dails { width:340px; height:340px; background:rgba(66,66,105,0.5); border-radius:50%; position:relative; box-shadow:5px 5px 30px 10px black; display:flex; justify-content:center; align-items:center; } .hour-dail { width:1px; height:100px; padding:0 4px 0 4px; background:white; box-shadow:3px 3px 10px black; position:absolute; top:70px; left:50%; transform:rotate(0deg) translateX(-50%); transform-origin:bottom center; } .minute-dail { width:1px; height:150px; padding:0 4px 0 4px; background:white; box-shadow:3px 3px 10px black; position:absolute; top:20px; left:50%; transform:rotate(0deg) translateX(-50%); transform-origin:bottom center; } .seconds-dail { width:1px; height:150px; padding:0 1px 0 1px; background:white; box-shadow:3px 3px 10px black; position:absolute; top:20px; left:50%; transform:rotate(0deg) translateX(-50%); transform-origin:bottom center; z-index:1; } .center-dail { width:40px; height:40px; background:white; border-radius:50%; box-shadow:2px 2px 10px black; z-index:100; } .clock-shadow { width:450px; height:50px; border-radius:50%; background:rgba(0,0,0,.2); margin-top:1.5em; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0