前言：首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果，实际就是渐变背景的旋转。但是在以前，渐变背景是不支持动画的。现在我们可以利用浏览器新出的 Houdini API 来实现这个动画效果。Houdini API 特别强大，允许开发者干扰浏览器渲染过程。其中有一个属性@property 允许开发者在样式代码里面，自己定义样式属性。
效果图：
代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style> body { background: #000; } .card::before { z-index: -1; filter: blur(20px); } .card::after { content: ""; position: absolute; inset: 8px; background: #191c29; border-radius: inherit; } @property --direc { syntax: "<angle>"; initial-value: 0deg; inherits: false; } .card { position: relative; width: 200px; height: 400px; margin: 100px auto; --direc: 0deg; color: red; background-image: linear-gradient( var(--direc), #5ddcff, #3c67e3, 43%, #4e00c2 ); animation: rotate 3s linear infinite; } @keyframes rotate { to { --direc: 360deg; } } </style> </head> <body> <div class="card"></div> <script></script> </body> </html>
