javascript - 通过 CSS3 模拟垂直轮胎上的旋转动画

Question

我正在考虑将旋转动画实现到垂直轮胎的想法和方法。它看起来像这样:

如果轮胎有侧面轮廓，那么显示它旋转会更容易，但在这个 Angular 我不知道如何模拟旋转运动。也许添加一点垂直模糊并淡入静态轮胎图像？

相反，我认为这个镜头可能不足以模拟旋转运动。也许我实际上需要一个 gif 或其他东西。

Answer 1

我想你可以尝试下面的方法 Tire Animation

<div class="tire"></div>


.tire{
  width:340px;
  height:700px;
  background:url(http://image.prntscr.com/image/a2aa80f21c274ecbba271d4c516d33c0.png) repeat-y;
  animation: tireanimation 1s   infinite;
  border-radius:10px;
  position:relative;
}
.tire:before{
  content:'';
  width:100%;
  height:80%;
  top:-30%;
  left:0;
  opacity:.7;
  position:absolute;
  background: rgba(255,255,255,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(66%, rgba(255,255,255,0)), color-stop(67%, rgba(255,255,255,0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
.tire:after{
  content:'';
  width:100%;
  height:80%;
  bottom:-30%;
  left:0;
  opacity:.2;
  position:absolute;
  background: rgba(255,255,255,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(66%, rgba(255,255,255,0)), color-stop(67%, rgba(255,255,255,0)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 67%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}

@keyframes tireanimation { 
    0%{background-position:100% 0%}
    100%{background-position:100% 100%}

}