场景：实现渐变色边框旋转
思路是：利用渐变色的背景旋转动画来实现边框旋转
代码如下：
<body><!-- 最外层仅起到限制渐变区域大小的作用 --><div class="wrap"><!-- 渐变显示区域 --><div class="rotate"></div><!-- 内容区域 --><div class="content">渐变色边框</div></div></body>
/* 最外层的作用是让中间的.rotate溢出部分隐藏 大小根据内容区域与边框大小自由调整 */.wrap {width: 400px;height: 166px;overflow: hidden;position: relative;display: flex;align-items: center;justify-content: center;}/* 最终动态渐变边框实际内容 比.wrap大 但是因为溢出部分被隐藏 而中间部分又因为层级关系被.content盖住 最后只有.wrap和.content之间的缝隙显示这个旋转的渐变色背景 */.rotate {width: 500px;height: 500px;background: linear-gradient(rgba(255, 59, 48, 1), rgba(255, 194, 48, 1));animation: rotate 2s infinite linear;position: absolute;z-index: -1;}/* 内容区域 根据自身情况调整大小 */.content {width: 396px;height: 162px;background-color: #fff;}/* 渐变色背景旋转动画 */@keyframes rotate {0% {transform: rotateZ(0);}100% {transform: rotateZ(360deg);}}
