CSS 奇思妙想边框动画

今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思：

觉得它的风格很独特，尤其是其中一些边框。

嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。

border 属性

谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。

除了最常见的 solid，dashed，CSS border 还支持 none，hidden， dotted， double， groove， ridge， inset， outset 等样式。除去 none，hidden，看看所有原生支持的 border 的样式：

基础的就这些，如果希望实现一个其他样式的边框，或者给边框加上动画，那就需要配合一些其他属性，或是脑洞大开。OK，一起来看看一些额外的有意思的边框。

边框长度变化

先来个比较简单的，实现一个类似这样的边框效果：

先来个比较简单的，实现一个类似这样的边框效果：

这里其实是借用了元素的两个伪元素。两个伪元素分别只设置上、左边框，下、右边框，通过 hover 时改变两个伪元素的高宽即可。非常好理解。

div {
    position: relative;
    border: 1px solid #03A9F3;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }
    
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
    
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
    
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}
复制代码

CodePen Demo -- width border animation

接下来，会开始加深一些难度。

虚线边框动画

使用 dashed 关键字，可以方便的创建虚线边框。

div {
    border: 1px dashed #333;
}
复制代码

当然，我们的目的是让边框能够动起来。使用 dashed 关键字是没有办法的。但是实现虚线的方式在 CSS 中有很多种，譬如渐变就是一种很好的方式：

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}
复制代码

看看，使用渐变模拟的虚线如下：

好，渐变支持多重渐变，我们把容器的 4 个边都用渐变