css+js实现墙壁射灯下的时钟挂钟指针走动显示时间效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现墙壁射灯下的时钟挂钟指针走动显示时间效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #dfdad4; height: 100vh; display: flex; align-items: center; justify-content: center; } .clock { position: relative; border-radius: 100%; box-shadow: 2px 10px 10px 10px rgba(0, 0, 0, 0.3), inset 2px 20px 10px 10px rgba(0, 0, 0, 0.3); } .wrap { width: 250px; height: 250px; border-radius: 100%; } .ringbit { position: absolute; width: 150px; height: 350px; border: 20px solid transparent; border-radius: 90px; margin: auto; left: 0; bottom: 0; right: 0; top: 0; border-bottom: 20px solid white; } .ringbit:before { content: ""; position: absolute; width: 150px; height: 350px; border: 20px solid transparent; border-radius: 90px; margin: auto; left: -15%; bottom: 0; right: 0; top: 5%; border-bottom: 20px solid rgba(0, 0, 0, 0.2); filter: blur(5px); z-index: -1; } .ring { position: absolute; width: 100%; height: 100%; border: 20px solid black; border-radius: 100%; box-sizing: border-box; border-left: 20px solid white; border-right: 20px solid white; } .light { position: absolute; width: 50px; height: 30px; top: 0; border-radius: 100%; background-color: white; box-shadow: 0 0 10px 5px white; } .lightray { position: absolute; width: 200px; height: 200px; top: 5%; border-radius: 50px; background-image: linear-gradient(45deg, transparent, transparent, white); transform: rotate(-45deg); } .panel { position: absolute; height: 180px; width: 180px; background-color: black; margin: auto; left: 0; right: 0; top: 0; bottom: 0; border-radius: 100%; } .panel:after { content: "RAMESH"; position: absolute; top: 48px; left: 0; right: 0; bottom: 0; color: silver; font-size: 11px; text-align: center; } .string1, .string2, .string3 { position: absolute; width: 3px; height: 180px; border-top: 30px solid black; border-bottom: 30px solid black; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .string1 { transform: rotate(45deg); } .string2 { transform: rotate(135deg); } .string3 { transform: rotate(0deg); border-bottom: 200px solid black; border-top: 0; } .mynum { font-family: "verdana"; font-size: 1.2em; color: white; } .mynum span { width: 180px; height: 180px; position: absolute; margin: auto; } .mynum span:nth-child(1) { left: 160px; right: 0; top: 20px; bottom: 0; } .mynum span:nth-child(11) { left: 75px; right: 0; top: 20px; bottom: 0; } .mynum span:nth-child(12) { left: 113px; right: 0; top: 0; bottom: 0; } .mynum span:nth-child(2) { left: 190px; right: 0; top: 80px; bottom: 0; } .mynum span:nth-child(10) { left: 25px; right: 0; top: 80px; bottom: 0; } .mynum span:nth-child(3) { left: 200px; right: 0; top: 155px; bottom: 0; } .mynu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0