Как сделать анимацию, как этот сайт 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

В чем проблема с кодом тестирования ур? – Kenneth

Мне нужен полный сэр, у меня сверху и снизу, но правая сторона и левая сторона - моя проблема. – JeffKuletz31

demo

На самом деле, нет необходимости манипулировать цвет фона в анимации ключевых кадров, и обе координаты - для первоначального скрытия линий этого достаточно, чтобы установить их ШИРИНУ/ВЫСОТА до 0px, а затем оживите их. Для линий TOP и BOTTTOM одинарная ширина, а для LEFT и RIGHT - высота. Для линий BOTTOM и LEFT соответственно сдвигаются «левые» и «верхние» координаты, так как эти линии выходят из противоположных горизонтальных/вертикальных углов экрана.

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

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

Затем добавить анимации задержку для каждой строки, суммируя их время появления на экране один за другим.

Также добавьте режим анимации-заполнения: вперед; поэтому линии не исчезают после окончания анимации.

P.S. Я не смотрел и не копировал код FITCH.com, это может быть так же, я не знаю.

источник

2016-01-11 14:04:10

Большое вам спасибо. – JeffKuletz31

еще раз спасибо за удивительный :) – JeffKuletz31

Как сделать анимацию, как этот сайт http://fitch.com

ответ

Смежные вопросы