svg实现简单沙漏旋转

最新推荐文章于 2022-06-12 21:16:13 发布

weixin_30809333

最新推荐文章于 2022-06-12 21:16:13 发布

阅读量201

点赞数

原文链接：http://www.cnblogs.com/WWWrs/p/7098899.html

版权

svg实现简单沙漏

先画一个简单的沙漏

例如：

svg代码：

.timerWrap {
  position: relative;
  animation: timerRotate 1s infinite ease;
  width: 120px;
  height: 160px;
  margin: auto;
  top: 40px;
}

@keyframes timerRotate {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-180deg);
  }
}

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    body {
  background: #1a1a1a;
}

.timerWrap {
  position: relative;
  animation: timerRotate 1s infinite ease;
  width: 120px;
  height: 160px;
  margin: auto;
  top: 40px;
}

@keyframes timerRotate {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-180deg);
  }
}
    </style>
</head>
<body>
        <div class="timerWrap">
          <svg version="1.1" viewBox="131.623 175.5 120 160" preserveAspectRatio="xMinYMin meet" class="timer">
            <path fill="#3f6b9d" d="M212.922,255.45l36.855-64.492c1.742-3.069,1.742-6.836-0.037-9.896c-1.783-3.06-5.037-4.938-8.581-4.938
            h-99.158c-3.524,0-6.797,1.878-8.569,4.938c-1.773,3.06-1.792,6.827-0.03,9.896l36.846,64.491l-36.845,64.492
            c-1.762,3.068-1.743,6.836,0.03,9.896c1.772,3.061,5.044,4.938,8.569,4.938h99.158c3.544,0,6.798-1.878,8.581-4.938
            c1.779-3.06,1.779-6.827,0.037-9.896L212.922,255.45z M142.001,324.86l39.664-69.41l-39.664-69.41h99.158l-39.663,69.41
            l39.663,69.41H142.001z"/>
            </svg>
        </div>

</body>
</html>