css实现立体逼真时钟走动动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现立体逼真时钟走动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans:300,400,700" rel="stylesheet">
<style>
    html {
  font-size: 1vw;
}
@media screen and (min-width: 700px) {
  html {
    font-size: 7px;
  }
}
@media screen and (max-width: 400px) {
  html {
    font-size: 4px;
  }
}

body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #F0EEEd, #E4E2E2);
  font-family: "Open Sans", sans-serif;
  filter: hue-rotate(5deg) saturate(130%) blur(0.3px);
}

.clock {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  border-radius: 40rem;
  transform: translate3d(-50%, -50%, 0);
  background: #F0EEEd;
  box-shadow: 1.5rem 3rem 2rem rgba(146, 135, 121, 0.15), 0.5rem 1rem 1.5rem rgba(104, 93, 82, 0.8), inset 0 0 0.4rem rgba(104, 93, 82, 0.2), inset -0.2rem -0.1rem 0.4rem rgba(146, 135, 121, 0.4), 2rem 6rem 7rem rgba(146, 135, 121, 0.3);
}

.face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35rem;
  height: 35rem;
  border-radius: 50rem;
  transform: translateX(-50%) translateY(-50%);
  background: #F0EEEd;
  box-shadow: 0 0 0.4rem rgba(104, 93, 82, 0.5), inset 0.2rem 0.1rem 0.4rem rgba(146, 135, 121, 0.4), inset 0.5rem 1rem 2rem rgba(146, 135, 121, 0.2), inset 0.25rem 0.5rem 1rem rgba(104, 93, 82, 0.4);
}

.hand {
  position: absolute;
  left: calc(50% - 1rem);
  width: 2rem;
  border-radius: 50rem;
  background: #685D52;
  filter: blur(0.4px);
}

@-webkit-keyframes big-tick {
  0% {
    transform: rotate(0deg);
    box-shadow: inset -0.2rem -0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset 0.2rem 0.2rem 0.2rem #9d9083, 0.3rem 0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  25% {
    transform: rotate(90deg);
    box-shadow: inset -0.2rem 0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset 0.2rem -0.2rem 0.2rem #9d9083, 0.3rem -0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  50% {
    transform: rotate(180deg);
    box-shadow: inset 0.2rem 0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset -0.2rem -0.2rem 0.2rem #9d9083, -0.3rem -0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  75% {
    transform: rotate(270deg);
    box-shadow: inset 0.2rem -0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset -0.2rem 0.2rem 0.2rem #9d9083, -0.3rem 0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: inset -0.2rem -0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset 0.2rem 0.2rem 0.2rem #9d9083, 0.3rem 0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
}

@keyframes big-tick {
  0% {
    transform: rotate(0deg);
    box-shadow: inset -0.2rem -0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset 0.2rem 0.2rem 0.2rem #9d9083, 0.3rem 0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  25% {
    transform: rotate(90deg);
    box-shadow: inset -0.2rem 0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset 0.2rem -0.2rem 0.2rem #9d9083, 0.3rem -0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  50% {
    transform: rotate(180deg);
    box-shadow: inset 0.2rem 0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset -0.2rem -0.2rem 0.2rem #9d9083, -0.3rem -0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  75% {
    transform: rotate(270deg);
    box-shadow: inset 0.2rem -0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset -0.2rem 0.2rem 0.2rem #9d9083, -0.3rem 0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: inset -0.2rem -0.2rem 0.2rem rgba(75, 68, 60, 0.5), inset 0.2rem 0.2rem 0.2rem #9d9083, 0.3rem 0.5rem 0.5rem rgba(104, 93, 82, 0.4);
  }
}
.hour {
  height: 11rem;
  transform-origin: 50% 10rem;
  top: calc(50% - 10rem);
  -webkit-animation: big-tick 43200s infinite linear;
          animation: big-tick 43200s infinite linear;
  -webkit-animation-delay: -36873s;
          animation-delay: -36873s;
}

.minute {
  height: .........完整代码请登录后点击上方下载按钮下载查看