纯css3使用skew实现不规则边框
clip 属性剪裁绝对定位元素。
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
API
rect (top, right, bottom, left)
代码附上：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流动边框</title>
<style>
body{
margin:50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060c21;
}
.box{
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border:1px solid green;
align-items: center;
color: #fff;
}
.box:after{
content: '';
position: absolute;
left:-4px;
top:-4px;
bottom: -4px;
right: -4px;
border:2px solid red;
animation: move 2s linear infinite;
}
@keyframes move {
0%{
clip:rect(0px,200px,120px,0px);
border-color: red;
}
25%{
clip:rect(0px,10px,200px,0px);
border-color: skyblue;
}
50%{
clip:rect(200px,200px,220px,0px);
border-color: yellow;
}
75%{
clip: rect(0px, 220px, 220px, 200px);
border-color: violet;
}
100%{
clip:rect(0px,200px,120px,0px);
border-color: greenyellow;
}
}
</style>
<div class="box">box</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skew实现不同颜色不规则边框</title>
<style>
body{
margin:50px;
display: flex;
justify-content: center;
align-items: center;
background-color: #060c21;
}
.box{
position: relative;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border:1px solid green;
align-items: center;
color: #fff;
}
.box:after{
content: '';
position: absolute;
left:0px;
top:0px;
bottom: 0px;
right: 0px;
margin: -10px;
border:2px solid red;
clip: rect(0px, 2px, 220px, 0px);
animation: move 8s linear infinite;
}
@keyframes move {
0%{
clip: rect(0px, 2px, 220px, 0px);
border-color: red;
}
25%{
clip: rect(218px, 220px, 220px, 0px);
border-color: skyblue;
}
50%{
clip: rect(0px, 220px, 220px, 218px);
border-color: yellow;
}
75%{
clip: rect(0px, 220px, 2px, 0px);
border-color: violet;
}
100%{
clip: rect(0px, 2px, 220px, 0px);
border-color: greenyellow;
}
}
</style>
<div class="box">box</div>
</body>
</html>
