简单边框动画

Posted 2020-09-12 Jo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单边框动画相关的知识，希望对你有一定的参考价值。

在layui论坛上闲逛时发现了一个用css3实现的边框动画，故简单实现了下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container{position: relative;width: 200px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #ccc;}
        span{position: absolute;display: inline-block;content: none;width: 0;height: 0;font-size: 0;border: 0;transition: .5s;}
        /*该动画实则是通过四个span标签分别设置边框，然后再增加宽度或者高度来实现的*/
        .top{top: 0;right: 0;border-top: 2px solid #000;}
        .right{bottom: 0;right: 0;border-right: 2px solid #000;}
        .bottom{bottom: 0;left: 0;border-bottom: 2px solid #000;}
        .left{top: 0;left: 0;border-left: 2px solid #000;}
        
        .container:hover .top,.container:hover .bottom{width: 200px;}
        .container:hover .left,.container:hover .right{height: 100px;}
        
        /*animate动画，因为上面运用了transition动画，故下面的动画注释了*/
        /*.top,.bottom{animation: bt .6s infinite ease-in-out;}
        .left,.right{animation: bl .6s infinite ease-in-out}*/
        @keyframes bt{
            from{
                width: 0;
            }
            25%{
                width: 50px;
            }
            50%{
                width: 100px;
            }
            75{
                width: 150px;
            }
            to{
                width: 200px;
            }
        }

        @keyframes bl{
            from{
                height: 0;
            }
            25%{
                height: 25px;
            }
            50%{
                height: 50px;
            }
            75%{
                height: 75px;
            }
            to{
                height: 100px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        KOBE BRYANT
        <span class="top"></span>
        <span class="right"></span>
        <span class="bottom"></span>
        <span class="left"></span>
    </div>
</body>
</html>

也可以看看这篇文章

以上是关于简单边框动画的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

iOS 动画虚线矩形边框

Blender制作多个动画片段时踩的坑

片段之间动画的共享元素