1.整体效果
在网页设计中，边框往往被视作静态的容器，但在CSS的魔法下，它们可以变得生动而富有动感。CSS边框线条流动效果是一种创新的视觉技术，它能够让边框看起来像是在流动或变化，为网页添加一种独特的动态美感。
2.完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态边框</title> </head> <body> <div class="container"> <div class="box"> HELLO WORLD <span class="line"></span> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div> </div> </body> </html>
CSS
.container { width: 800px; height: 680px; margin: 20px auto; /* border: 1px solid green; */ position: relative; } .box { width: 420px; height: 210px; margin: 100px auto; line-height: 210px; text-align: center; font-size: 40px; position: relative; overflow: hidden; } .line { position: absolute; } .line:nth-child(1) { top: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(90deg, transparent, rgb(234, 249, 158)); animation: animate1 8s linear infinite; } @keyframes animate1 { 0% { left: -100%; } 50%, 100% { left: 100%; }} .line:nth-child(2) { top: -100%; right: 0; width: 8px; height: 100%; background: linear-gradient(180deg, transparent, rgb(160, 245, 250)); animation: animate2 8s linear infinite; /* 注意要加上延时触发动画效果，这样线条才会依次触发 */ animation-delay: 2s; } @keyframes animate2 { 0% { top: -100%; } 50%, 100% { top: 100%; }} .line:nth-child(3) { bottom: 0; right: 0; width: 100%; background: linear-gradient(270deg, transparent, rgb(245, 58, 220)); animation: animate3 8s linear infinite; animation-delay: 4s; } @keyframes animate3 { 0% { right: -100%; height: 8px; } 50%, 100% { height: 8px; right: 100%; }} .line:nth-child(4) { bottom: -100%; left: 0; width: 8px; height: 100%; background: linear-gradient(360deg, transparent, rgb(254, 138, 49)); animation: animate4 8s linear infinite; animation-delay: 6s; } @keyframes animate4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; }}
3.关键点
CSS边框线条流动效果是有以下几个关键点：
- CSS盒模型（Box Model）：通过设置
width、height、margin等属性来控制元素的大小和位置。
- CSS定位（Positioning）：使用position: relative;和position: absolute;来设置元素的定位方式，使得线条能够相对于小盒子定位。
- CSS渐变（Gradients）：使用linear-gradient函数创建线条的渐变背景。
- CSS动画（Animations）：使用@keyframes定义动画，并通过animation属性应用到元素上，实现线条的动态效果。
- CSS伪类选择器（Pseudo-class selectors）：使用:nth-child伪类选择器来选择特定的线条元素，并对它们应用不同的样式。
- CSS动画延时（Animation delay）：通过animation-delay属性设置动画的延时时间，使得线条动画能够依次开始。
- CSS动画无限循环（Infinite animations）：通过设置animation-iteration-count: infinite;使得动画无限次地重复。
