<div class="box-wrap">
<div class="border-layer"></div>
<div class="box-content"></div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 容器 */
.box-wrap{
width:300px;
height:200px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
/* 作为边框的旋转层 */
.box-wrap .border-layer{
background-image:
conic-gradient(
from 45deg,
#ffbe44 0deg 90deg,
#5DADE2 90deg 180deg,
#ee5732 180deg 270deg,
#2ECC71 270deg 360deg
);
position:absolute;
left:50%;
top:50%;
width:370px;
height:370px;
margin-left:-185px;
margin-top:-185px;
animation:6s infinite linear rotate;
}
/* 旋转动画 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 内容层 */
.box-wrap .box-content{
width:292px;
height:192px;
background-color:#fff;
border-radius: 8px;
overflow: hidden;
position: absolute;
top:4px;
left:4px;
padding:10px;
box-sizing: border-box;
}
JS
格式化