css 跑马灯七彩边框 |css after伪元素

/* 定义CSS样式表 */
.marquee {
height: 50px; /* 跑马灯高度 */
overflow: hidden; /* 隐藏超出部分 */
box-sizing: border-box; /* 盒子模型 */
border: 5px solid #333; /* 边框样式 */
border-radius: 25px; /* 边框半径 */
padding: 10px; /* 内边距 */
margin-bottom: 20px; /* 下边距 */
position: relative; /* 相对定位 */
}
.marquee:before {
content: ""; /* 伪元素 */
position: absolute; /* 绝对定位 */
width: 5px; /* 宽度 */
height: 100%; /* 高度 */
left: 0; /* 左侧对齐 */
top: 0; /* 顶部对齐 */
background-color: #3f51b5; /* 蓝色 */
animation: move 4s linear infinite; /* 动画效果 */
}
.marquee:after {
content: ""; /* 伪元素 */
position: absolute; /* 绝对定位 */
width: 5px; /* 宽度 */
height: 100%; /* 高度 */
right: 0; /* 右侧对齐 */
top: 0; /* 顶部对齐 */
background-color: #ff5722; /* 橙色 */
animation: move 4s linear infinite; /* 动画效果 */
}
@keyframes move {
0% {
transform: translateX(0); /* 初始位置 */
}
100% {
transform: translateX(100%); /* 移动到最右侧 */
}
}

以上代码中，大家定义了一个名为“.marquee”的CSS样式表，它包含了跑马灯的基本样式，以及两个伪元素“:before”和“:after”，分别用于定义跑马灯的两侧边框颜色和动画效果。

其中，“box-sizing: border-box;”表示使用边框盒模型计算元素的宽度和高度，而“animation: move 4s linear infinite;”则定义了跑马灯的动画效果和持续时间。

跑马灯七彩边框是一种易于实现、视觉效果鲜明的CSS效果，它的应用范围广泛，可以用在博客、新闻网站、电商平台等网站中，为用户带来更好的阅读体验和视觉感受。