css边框虚线_如何使用CSS对虚线边框进行动画处理

装饰的边框可以装饰页面上的任何元素，但是CSS边框在样式方面受到限制。 开发人员经常想出解决方案，例如CSS渐变边框 ， SVG边框 ， 多个边框等 ，以模仿和升级盒子边框及其动画的外观。

今天，我们将研究虚线边框的一种更简单的破解方法：虚线动画。 动画虚线边框将仅使用outline和box-shadow创建，而无需担心后备问题，因为IE8及更高版本支持outline 。 这样，与使用SVG或渐变时不同，用户仍将能够看到边界。 这样您还可以创建双色破折号。 让我们来看看。

创造边界

我们将首先创建边界。 为此，我们将使用虚线轮廓和框阴影。

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    ...
 }

outline将需要其所有值； 宽度，类型和颜色。 box-shadow只需要扩散的值，该值应与轮廓的宽度和颜色相同。 轮廓线和框阴影线都将产生双色虚线的效果。

然后，您可以调整框的宽度或高度，以使所需的边框看起来在角落。

动画边框

对于我们的第一个动画示例，我们将CSS关键帧动画添加到一组横幅，这些横幅的边框连续动画，以引起关注。 对于动画效果，我们将只交换轮廓和框阴影的颜色。

@keyframes animateBorder {
  to {
    outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
  }
}

您可以使用outline-color longhand属性指定outline-color ，但是对于框阴影，您现在必须将所有值都赋予shorthand属性。

动画准备好后，将其添加到框中。

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    animation: 1s animateBorder infinite;
    ...
}

跨境过渡

对于过渡示例，我们将为图片添加边框，并对悬停时的边框进行动画处理。 您还可以更改边框大小以获得不同的效果。

.photos{
    outline: 20px dashed #006DB5;
    box-shadow: 0px 0px 0px 20px #3CFDD3;
    transition: all 1s;
    ...
}

.photos:hover{
    outline-color: #3CFDD3;
    box-shadow: 0 0 0 20px #006DB5;
}

现在，将鼠标悬停在这些图像上，即可看到CSS虚线边框的所有动画效果。

而且，这是一个包装。 您可以尝试将虚线边框替换为虚线边框，但效果可能不尽如人意。 您还可以在动画制作过程中更改轮廓类型以获得更多效果。

翻译自: https://www.hongkiat.com/blog/css-animated-dashed-border/