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: #f4f4dd;
        }
        
        #seconds, #minutes, #hours {
          position: fixed;
          border-radius: 50%;
          top: calc(50% - 127px);
          left: calc(50% - 127px);
          transform: rotateZ(0deg);
          transition: all 0.3s cubic-bezier(0.77, 1.76, 0.4, 0.77);
          width: 255px;
          height: 255px;
          background-image: url("//repo.bfw.wiki/bfwrepo/images/clock/5928669a17321feb5f00e808d6b61bc4.png");
          background-size: 255px;
          background-repeat: no-repeat;
          background-position: center;
          z-index: 1;
        }
        
        #minutes {
          top: calc(50% - 100px);
          left: calc(50% - 100px);
          width: 200px;
          height: 200px;
          background-size: 200px;
          z-index: 2;
        }
        
        #hours {
          top: calc(50% - 75px);
          left: calc(50% - 75px);
          background-size: 200px;
          width: 150px;
          height: 150px;
          z-index: 3;
        }
        #hours #coin {
          position: relative;
          top: calc(100% - 48px);
          left: calc(50% - 22px);
          height: 45px;
          width: 45px;
          border-radius: 50%;
          z-index: 4;
          perspective: 2000px;
        }
        #hours #coin #shadow {
          position: absolute;
          top: 0;
          left: 0;
          background-color: #221E1C;
          box-shadow: inset -1px -1px 5px 5px rgba(0, 0, 0, 0.7);
          width: 45px;
          height: 45px;
          border-radius: 50%;
          z-index: 5;
        }
        #hours #coin #moon {
          position: absolute;
          top: 0;
          left: 0;
          background-image: url("//repo.bfw.wiki/bfwrepo/images/clock/majoras-moon.png");
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          width: 45px;
          height: 45px;
          perspective: 2000px;
          backface-visibility: hidden;
          transform: rotateY(180deg);
          transition: all 0.5s cubic-bezier(0.77, 1.76, 0.4, 0.77) 0.5s;
          z-index: 6;
        }
        #hours #coin #moon.night {
          transform: rotateY(0deg);
        }
        #hours #coin #sun {
          position: absolute;
          top: 0;
          left: 0;
          background-image: url("//repo.bfw.wiki/bfwrepo/images/clock/majoras-sun.png");
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          width: 45px;
          height: 45px;
          perspective: 2000px;
        .........完整代码请登录后点击上方下载按钮下载查看