效果展示
代码部分
<!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">
<title>Document</title>
</head>
<body>
<div class="box">1234</div>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 180px;
height: 250px;
border-radius: 20px;
margin: 100px auto;
background-color: #000;
overflow: hidden;
z-index: 0;
}
.box::before {
content: '';
position: absolute;
z-index: -2;
width: 120px;
height: 120%;
background: linear-gradient(#03fcc6, #ff0296);
animation: rotates 3s linear infinite;
}
.box::after {
content: '';
position: absolute;
z-index: -1;
border-radius: 20px;
inset: 5px;
background-color: #FFF;
/* background-color: #0e1538; */
}
@keyframes rotates {
to {
transform: rotate(360deg);
}
}
</style>
</body>
</html>
代码解释
这段HTML代码定义了一个简单的页面，包含一个带有样式的div元素。该元素使用CSS样式定义了一个具有渐变背景色、居中显示文本的矩形框。矩形框的外部轮廓由border-radius属性定义为圆形，并通过overflow: hidden属性隐藏溢出部分。在矩形框的前面和后面，使用CSS的::before和::after伪元素分别定义了一个动态旋转的背景和一个内边框。
一般添加上动画即可，但是如果div元素有内容显示就比较麻烦，这时需要调整层级关系以及背景颜色的搭配来简单的达到目的
