如何製作本網站的動畫http://fitch.com

如何製作動畫如http://fitch.com請參閱頂部，右側，底部和左側。它看起來像裝..如何製作本網站的動畫http://fitch.com

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.topLoader { 
width: 100%; 
height: 5px; 
background-color: #fff; 
position: relative; 
-webkit-animation-name: example; /* Chrome, Safari, Opera */ 
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
animation-duration: 2s; 
animation-name: mytop ; 
} 
.bottomLoader { 
width: 100%; 
height: 5px; 
background-color: #fff; 
position: relative; 
-webkit-animation-name: example; /* Chrome, Safari, Opera */ 
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
animation-duration: 2s; 
animation-name: mybottom ; 
} 
@keyframes mytop { 
0% {background-color:#000000; left:0px; top:0px;} 
100% {background-color:#000000; left:100%; top:0px;} 
} 
@keyframes mybottom { 
0% {background-color:#000000; left:100%; top:100%;} 
100% {background-color:#000000; left:0px; top:100%;} 
} 
</style> 
</head> 
<body> 
<div class="topLoader"></div><br> 
<div class="rightLoader"></div><br> 
<div class="leftLoader"></div><br> 
<div class="bottomLoader"></div><br> 
</body> 
</html>

來源

2016-01-11 JeffKuletz31

ur測試代碼有什麼問題？ – Kenneth

我需要充分的先生我有頂部和底部，但右側和左側是我的問題。 – JeffKuletz31

demo

其實，沒有必要操縱背景色的動畫關鍵幀和兩個座標 - 對於線的初始隱藏它足以設置它們的寬度/高度爲0px，然後爲它們設置動畫。對於TOP和BOTTOM的線條動畫寬度，而對於LEFT和RIGHT則使用高度。對於BOTTOM和LEFT行，「left」和「top」座標也會相應地生成動畫，因爲這些行將從屏幕的相對水平/垂直角移出。

@keyframes mybottom { 
    0% {width:0px; left:100%;} 
    100% {width:100%; left:0;} 
} 

@keyframes myleft { 
    0% {top:100%; height:0} 
    100% {top:0; height:100% } 
}

然後，爲每一行添加動畫延遲，總結它們在屏幕上出現的時間。

另外添加animation-fill-mode：forwards;所以線條在動畫結束後不會消失。

P.S.我沒有看和複製FITCH.com的代碼，它可能是相同的，我不知道。

來源

2016-01-11 14:04:10

非常感謝。 – JeffKuletz31

再次感謝它的驚人:) – JeffKuletz31

如何製作本網站的動畫http://fitch.com

回答

相關問題