侧边栏壁纸

简易的时钟效果

2024年03月17日 494阅读 0评论 1点赞

演示图

  • HTML代码

    <div class="light"></div>
          <div class="lightray"></div>
          <div class="clock">
              <div class="wrap">
                  <div class="string1"></div>
                  <div class="string2"></div>
                  <div class="string3"></div>
                  <div class="ringbit"></div>
                  <div class="ring"></div>
                  <div class="panel"></div>
                  <div class="hour"></div>
                  <div class="minute"></div>
                  <div class="second"></div>
                  <div class="pin"></div>
                  <div class="mynum">
                      <span>1</span>
                      <span>2</span>
                      <span>3</span>
                      <span>4</span>
                      <span>5</span>
                      <span>6</span>
                      <span>7</span>
                      <span>8</span>
                      <span>9</span>
                      <span>10</span>
                      <span>11</span>
                      <span>12</span>
                  </div>
              </div>
          </div>
  • CSS代码:

    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;
              }
    
              .mynum span:nth-child(9) {
                  left: 10px;
                  right: 0;
                  top: 155px;
                  bottom: 0;
              }
    
              .mynum span:nth-child(4) {
                  left: 188px;
                  right: 0;
                  top: 235px;
                  bottom: 0;
              }
    
              .mynum span:nth-child(8) {
                  left: 30px;
                  right: 0;
                  top: 235px;
                  bottom: 0;
              }
    
              .mynum span:nth-child(5) {
                  left: 160px;
                  right: 0;
                  top: 270px;
                  bottom: 0;
              }
    
              .mynum span:nth-child(7) {
                  left: 80px;
                  right: 0;
                  top: 270px;
                  bottom: 0;
              }
    
              .mynum span:nth-child(6) {
                  left: 120px;
                  right: 0;
                  top: 280px;
                  bottom: 0;
              }
    
              .hour,
              .minute,
              .second {
                  position: absolute;
                  background-color: white;
                  margin: auto;
                  left: 0;
                  right: 0;
                  transform-origin: bottom center;
              }
    
              .hour {
                  height: 50px;
                  width: 5px;
                  top: 75px;
                  border-radius: 10px;
              }
    
              .minute {
                  height: 65px;
                  width: 3.5px;
                  top: 60px;
                  border-radius: 10px;
              }
    
              .second {
                  height: 70px;
                  width: 2px;
                  top: 55px;
                  border-radius: 3px;
              }
    
              .pin {
                  position: absolute;
                  width: 5px;
                  height: 5px;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  background-color: orange;
                  border: 2px solid white;
                  border-radius: 100%;
              }
    
              @keyframes myanim1 {
                  to {
                      transform: rotate(360deg);
                  }
              }
  • JS代码:
      var inc = 1000;
            myclock();
            function myclock() {
                const mydate = new Date();
                const hours = ((mydate.getHours() + 11) % 12) + 1;
                const minutes = mydate.getMinutes();
                const seconds = mydate.getSeconds();
                const hdegree = hours * 30;
                const mdegree = minutes * 6;
                const sdegree = seconds * 6;
                document.querySelector(".hour").style.transform = `rotate(${hdegree}deg)`;
                document.querySelector(".minute").style.transform = `rotate(${mdegree}deg)`;
                document.querySelector(".second").style.transform = `rotate(${sdegree}deg)`;
            }
            setInterval(myclock, inc);
1
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
舔狗日记