Question

如何制作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>

Answer 1

<强> 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代码，它可能是相同的，我不知道。

我如何像这个网站http://fitch.com制作动画

1 个答案: