前言：
边框流动动画是一种非常常见的效果，能够让网页看起来更加生动有趣。通过使用 CSS3，我们可以轻松地实现这种动画效果。本文将介绍如何使用 CSS3 实现边框流动效果，下面一起来看看吧。
示例图：边框是动画持续变化的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通过 houdini api 实现，css 样式干预，它定义的不是一个简单变量，而是 css 属性*//* syntax：表示这个属性值的类型 initial-value：默认值是什么inherits：是否可以被继承*/@property --direc {syntax: '<angle>'; initial-value: 0deg;inherits: false;}.card {--direc: 0deg;width: 200px;height: 400px;padding: 10px;margin: 100px auto;background-image: linear-gradient(var(--direc),#5ddcff,#3c67e3 43%,#4e00c2);animation: rotate 3s linear infinite;}.content {width: 100%;height: 100%;background-color: #fff;}@keyframes rotate {to {--direc: 360deg;}}</style>
</head>
<body><div class="card"><div class="content"></div></div>
</body>
</html>
