《用 CSS 实现流动边框特效》
收起
html
复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flowing-box">这是一个box</div>
</body>
</html>收起
css
复制
.flowing-box {
width: 200px;
height: 150px;
background-color: #fff;
position: relative;
}收起
css
复制
@keyframes flowing-border {
0% {
box-shadow: inset 0 0 0 2px #ff0000;
}
25% {
box-shadow: inset 0 0 0 2px #00ff00;
}
50% {
box-shadow: inset 0 0 0 2px #0000ff;
}
75% {
box-shadow: inset 0 0 0 2px #ffff00;
}
100% {
box-shadow: inset 0 0 0 2px #ff00ff;
}
}收起
css
复制
.flowing-box {
/* 其他样式 */
animation: flowing-border 5s linear infinite;
}
