虛線使用css3運行

Question

最近在我的項目中，我遇到了鏈接中的圖像。這就像在音樂，藝術，歌手等行業中將人才聚集在一起。是否有可能使用CSS3動畫，轉換或轉換來運行虛線...？如果是這樣做的話。

Answer 1

這將有可能將其定位的其他方法，但你需要考慮在不同的瀏覽器中會發生什麼。所有瀏覽器尚未（完全）支持Css動畫。另外，css變換沒有完全集成，所以在IE中你會看到一個破損的頁面，裏面有一些隨機的水平線。

但是你想使用這個，你需要單獨爲每條線設置動畫。 看看這個網站上的動畫信息http://css3.bradshawenterprises.com/

對於16行這將是可怕的。但可以用下面的代碼完成。

.line { 
border-top: 1px solid red; 
height: 1px; 
} 

#line1 { 
position absolute; 
width: 200px; 
-moz-transform:rotate(45deg); 
-webkit-transform:rotate(45deg); 
transform:rotate(45deg); 
-webkit-animation:move_line1 1s infinite; 
-moz-animation:move_line1 1s infinite; 
animation:move_line1 1s infinite; 
} 

#line2 { 
... 
} 

@keyframes move_line1 { 
0% { 
    top: 300px; 
    left: 300px; 
} 
100% { 
    top: 280px; /* Based on the rotation you can calculate the new x and y with sine and cosine */ 
    left: 280px; 
} 
} 

@keyframes move_line2 { 
... 
} 

你基本上會以下內容添加到您的HTML

<div id="line1" class="line> </div> 
<div id="line2" class="line> </div> 
... 

Answer 2

border: 1px dashed red; 

然後用正確