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

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

代码语言：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(-5.........完整代码请登录后点击上方下载按钮下载查看