css+js实现墙壁射灯下的时钟挂钟指针走动显示时间效果代码-html代码-BFW代码库

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;
        widt.........完整代码请登录后点击上方下载按钮下载查看