css实现时针转动动画效果代码-html代码-BFW代码库

css实现时针转动动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现时针转动动画效果代码

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

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

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


  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300");
body {
  font-family: Lato, sans-serif;
  font-size: 10vmin;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

div {
  padding-top: 5vh;
}

.shadow {
  stroke-width: 0;
  fill: #ddd;
}

.longback {
  stroke: #fff;
  stroke-width: 180;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  transform-box: fill-box;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  transition: all 0s ease-out 2.8s;
}

.longred {
  stroke: #f00;
  stroke-width: 130;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  transform-box: fill-box;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  transition: all 0s ease-out 2.8s;
}

svg {
  width: 800px;
  max-width: 50vw;
  max-height: 50vh;
  overflow: visible;
}

.outer {
  fill: #fff;
  stroke: #000;
  stroke-width: 100;
}

.inner {
  fill: #f00;
  stroke-width: 0;
}

path {
  stroke: #000;
  stroke-width: 45;
}

.long {
  stroke: #f00;
  stroke-width: 130;
  transition: all 2s ease;
  transform-origin: 0% 100%;
  transform-box: fill-box;
}

.short {
  stroke: #f00;
  stroke-width: 130;
  transition: all 2s ease;
  transform-box: fill-box;
  transform-origin: 0% 100%;
}

svg.loaded .long {
  transform: rotate(2205deg);
}
svg.loaded .short {
  transform: rotate(315deg);
}
svg.loaded .longback, svg.loaded .longred {
  stroke-dashoffset: 20;
  animation: grow 800ms cubic-bezier(0.61, 1.5.........完整代码请登录后点击上方下载按钮下载查看