需要采用 filter: hue-rotate(deg); 方法,先挂个链接在下面,不了解的可以去查一下
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
html代码
<div></div>
因为只是画一个边框,所以我们只需要创建一个盒子,然后给其加上边框
css代码
div {
width: 200px;
height: 200px;
border: 10px solid;
}
首先创造一个有边框的盒子,因为我们是彩色边框,所以我们不需要直接赋予边框颜色.
css代码
border-image: linear-gradient(45deg, #dc4024, #852dc9) 1;
//边框图片,允许在元素的边框上绘制图像,
//但是会替换掉border-style属性所设置的边框样式
//linear-gradient()创建一个表示两种或多种颜色线性渐变的图片
clip-path: inset(0px round 10px);
//clip-path 裁剪,区域内的部分显示，区域外的隐藏
//inset() 为矩形裁剪 round 为圆角
我们为其加上这一段代码,便可以得到一个彩色的框
彩框.png
但是它并不是很高级,因为它不能动,所以我们给它加个样式和一个动画
css代码
animation: bk 6s linear infinite;
filter: hue-rotate(360deg);
//filter 过滤 hue-rotate(360deg) 函数在输入图像上应用色相旋转.
@keyframes bk {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rorate(360deg);
}
}
这样我们便得到了一个会自动变换颜色的边框了
彩色框框.gif
下面附上完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
div {
width: 200px;
height: 200px;
border: 10px solid;
border-image: linear-gradient(45deg, #dc4024, #852dc9) 1;
margin: 100px auto;
clip-path: inset(0px round 10px);
animation: bk 6s linear infinite;
filter: hue-rotate(360deg);
}
@keyframes bk {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rorate(360deg);
}
}
</style>
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
谢谢观赏!!! (╹▽╹)
网友评论