徽标周围的动画线条

我正在尝试制作一个CSS3动画，我可以从左侧角落开始围绕徽标移动线条，然后结束回到那里，整个边框将保留在那里。徽标周围的动画线条

这里是我的代码：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    animation-name: example; 
 
    animation-duration: 20s; 
 
} 
 
@keyframes example { 
 
    0% { 
 
    border-left: 10px; 
 
    border-color: black; 
 
    } 
 
    25% { 
 
    border-bottom: 10px; 
 
    border-color: black; 
 
    } 
 
    50% { 
 
    border-right: 10px; 
 
    border-color: black; 
 
    } 
 
    75% { 
 
    border-top: 10px; 
 
    border-color: black; 
 
    } 
 
    100% { 
 
    border: 10px; 
 
    border-color: black; 
 
    } 
 
}

<div> 
 
    <img src="http://placehold.it/100x100"> 
 
</div>

...但它不是工作。有任何想法吗？

来源

2015-10-20 user3150060

嘿只是看看我的答案，你需要添加一个'边界'和'边界颜色'的初始值... –

可能与http：// stackoverf相关low.com/questions/31996110/progress-bar-along-the-borders-of-a-rectangle/32003052#32003052。虽然问题标题有所不同，但第一个片段似乎能够产生您在此处描述的确切输出。 – Harry

你需要设置一个边界开始..它不能动画不存在的东西...只需将border:1px solid black;添加到您的div代码。

如果你希望它结束的最后一帧，并保留这种风格有2个所需的其他属性...

animation-iteration-count: 1; // runs animation once 
animation-fill-mode: forwards; // keep style specified in last keyframe

最终的代码如下：

div { 
 
    border: 0px solid black; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    animation-name: example; 
 
    animation-duration: 10s; 
 
    animation-iteration-count: 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes example { 
 
    0% { 
 
    border-left: 10px; 
 
    border-color: black; 
 
    } 
 
    25% { 
 
    border-top: 10px; 
 
    border-color: black; 
 
    } 
 
    50% { 
 
    border-right: 10px; 
 
    border-color: black; 
 
    } 
 
    75% { 
 
    border-bottom: 10px; 
 
    border-color: black; 
 
    } 
 
    100% { 
 
    border: 10px solid black; 
 
    border-color: black; 
 
    } 
 
}

<div> 
 
    <img src="http://placehold.it/100x100"> 
 
</div>

来源

2015-10-20 00:40:08 TinMonkey

这不提供问题的答案。要批评或要求作者澄清，请在其帖子下方留言。 –

我不同意。它完全回答了他的问题。他说他的代码不起作用。我给了他一行代码添加，这将使他的代码工作。 – TinMonkey

基本上我需要边框动画周围的所有日志和动画的结尾是一个完整的边框 – user3150060

徽标周围的动画线条

回答

相关问题