想实现一个css控制的旋转渐变圆角边框还挺艰辛，知识点多多。
1. 渐变圆角边框实现
-
- 👍：最简单
- 🤦🏻♀️：不支持设置圆角
border-radius（如果只需要外层圆角可以利用clip-path）
以下四个方案支持全圆角，只使用单个元素（利用了伪元素），最后一个支持背景透明
-
两个元素相叠
-
做个透明框
- key code：
background-clip: padding-box;border-radius: inherit;
- 具体代码
- 👍：内外圆角完美
- key code：
-
background属性巧用
- key code：
background-clip: padding-box, border-box;background-origin: padding-box, border-box;background-image: linear-gradient(to right, #222222aa, #222222aa),linear-gradient(45deg,#add8e6, #fff87d, #ff9c9c);
- 具体代码
- 👍：内外圆角完美、真·单元素
- key code：
-
直接裁框
- 裁剪方案MDN：clip-path、mask-image
- clip-path具体代码或mask-image具体代码
- ⭐️：支持背景透明
- 🤦🏻♀️：代码可读性差且不易修改
2. 旋转渐变动画实现
以上方案都是依靠background来设置颜色的，所以加旋转动画只需要控制background。
但如果直接像⬇️把整个background带入是没有过渡效果的。
@keyframes rotateGradient {
0% {background-image: linear-gradient(to right, #222, #222),
linear-gradient(0deg, #ff356422, #add8e622, #fff87d22, #fafafa22, #ff9c9c22);}
100% {background-image: linear-gradient(to right, #222, #222),
linear-gradient(180deg, #ff356422, #add8e622, #fff87d22, #fafafa22, #ff9c9c22);}}
}
所以关键设置一个css变量
@property --rotate {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes rotateGradient {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
3. 最终代码
@property --rotate {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes rotateGradient {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
.box-border {
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222),
linear-gradient(var(--rotate), #ff356422, #add8e622, #fff87d22, #fafafa22, #ff9c9c22);
animation: rotateGradient 10s linear infinite;
transform-origin: center;
}
