相比我之前发的那个彩色边框,这个不能实现随机颜色,但是代码更加简单.
html代码
<div class="box">
<div class="kuang"></div>
<span></span>
</div>
创建一个盒子,里面有彩色边框和一个内容
然后设置样式
css代码
.box {
position: relative;
/* 相对定位 */
width: 150px;
height: 150px;
/* 宽高 */
margin: 100px auto;
/* 水平居中 */
border-radius: 4px;
/* 边框圆角 */
overflow: hidden;
/* 溢出隐藏 */
}
.kuang {
position: relative;
/* 相对定位 */
width: 0px;
height: 0px;
/* 宽高为0,因为要彩色边框现成的三角形,所以设置为0 */
border-top: 200px solid yellow;
border-right: 200px solid skyblue;
border-bottom: 200px solid red;
border-left: 200px solid blueviolet;
/* 四条边框的颜色 */
left: -125px;
top: -125px;
/* 定位的位置 */
}
.box > span {
position: absolute;
top: 0px;
/* 绝对定位 */
width: 134px;
height: 134px;
/* 宽高 */
margin: 8px;
/*给外边距让图片居中*/
border-radius: 4px;
/* 边框圆角 */
background-color: white;
/* 白色边框 */
然后我们就拿到了一个彩色边框
流动边框.png
为了让其好看,我们可以给内容加上图片
头像.jpg
css代码
.box > span {
position: absolute;
top: 0px;
/* 绝对定位 */
width: 134px;
height: 134px;
/* 宽高外边距 */
margin: 8px;
border-radius: 4px;
/* 边框圆角 */
background-size: cover;
/*把背景图片放大到适合元素容器的尺寸，图片比例不变,超出的部分裁掉。*/
background-image: url(https://upload-images.jianshu.io/upload_images/28377646-63e2bd5054fe88bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);
background-color: white;
/* 白色边框 */
}
然后给边框加上动画
css代码
.kuang {
position: relative;
/* 相对定位 */
width: 0px;
height: 0px;
/* 宽高为0,因为要彩色边框现成的三角形,所以设置为0 */
border-top: 200px solid yellow;
border-right: 200px solid skyblue;
border-bottom: 200px solid red;
border-left: 200px solid blueviolet;
/* 四条边框的颜色 */
left: -125px;
top: -125px;
/* 定位的位置 */
animation: dh 2s linear infinite;
}
@keyframes dh {
to {
transform: rotate(1turn);
}
}
就成型了
流动边框.gif
下面是全部代码,谢谢观看
<style>
.box {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto;
border-radius: 4px;
overflow: hidden;
}
.kuang {
position: relative;
width: 0px;
height: 0px;
border-top: 200px solid yellow;
border-right: 200px solid skyblue;
border-bottom: 200px solid red;
border-left: 200px solid blueviolet;
left: -125px;
top: -125px;
animation: dh 2s linear infinite;
}
@keyframes dh {
to {
transform: rotate(1turn);
}
}
.box > span {
position: absolute;
top: 0px;
width: 134px;
height: 134px;
margin: 8px;
border-radius: 4px;
background-size: cover;
background-image: url(https://upload-images.jianshu.io/upload_images/28377646-63e2bd5054fe88bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);
background-color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="kuang"></div>
<span></span>
</div>
</body>
