通過CSS3在垂直輪胎上模擬旋轉動畫

Question

我正在考慮將想法和方法用於垂直輪胎的旋轉動畫。它看起來是這樣的：

如果輪胎有一個側面輪廓，然後它會更容易表現出來紡紗，但在這個角度，我不知道如何來模擬一個旋轉運動。也許增加一點垂直模糊並淡入靜態輪胎圖像？

相反，我想這個鏡頭可能不足以模擬旋轉運動。也許我實際上需要一個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%} 

}