1、预览效果2、实现代码!DOCTYPEhtmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0title边框动画效果/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;padding:40px 20px;background:#0a0a0f;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#e8e8f0;}h1{font-size:1.6rem;font-weight:600;letter-spacing:0.05em;color:#a0a0b8;}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:960px;width:100%;}.card{position:relative;padding:32px 28px;border-radius:16px;background:#12121a;text-align:center;}.card h2{font-size:1.1rem;margin-bottom:8px;}.card p{font-size:0.85rem;color:#8888a0;line-height:1.5;}/* 1. 旋转渐变边框 */.border-rotate{overflow:hidden;z-index:0;}.border-rotate::before{content:;position:absolute;inset:-50%;background:conic-gradient(from 0deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#c77dff,#ff6b6b);animation:spin 3s linear infinite;z-index:-2;}.border-rotate::after{content:;position:absolute;inset:3px;border-radius:13px;background:#12121a;z-index:-1;}keyframes spin{to{transform:rotate(360deg);}}/* 2. 流光边框 */.border-shine{overflow:hidden;border:2px solid transparent;background-clip:padding-box;}.border-shine::before{content:;position:absolute;inset:-2px;border-radius:16px;padding:2px;background:linear-gradient(90deg,transparent0%,transparent40%,#00f5ff50%,transparent60%,transparent100%);background-size:200%100%;animation:shine2.5s linear infinite;-webkit-mask:linear-gradient(#fff00)content-box,linear-gradient(#fff00);mask:linear-gradient(#fff00)content-box,linear-gradient(#fff00);-webkit-mask-composite:xor;mask-composite:exclude;z-index:-1;}keyframes shine{0%{background-position:200%0;}100%{background-position:-200%0;}}/* 3. 呼吸发光边框 */.border-glow{border:2px solid #4d96ff;animation:glow-pulse 2s ease-in-out infinite;}keyframes glow-pulse{0%,100%{border-color:#4d96ff;box-shadow:008pxrgba(77,150,255,0.3),inset008pxrgba(77,150,255,0.05);}50%{border-color:#c77dff;box-shadow:0024pxrgba(199,125,255,0.6),0048pxrgba(77,150,255,0.2),inset0016pxrgba(199,125,255,0.1);}}/* 4. 四边依次绘制 */.border-draw{border:none;background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(90deg,#ff6b6b50%,transparent50%)border-box;border:2px solid transparent;animation:draw-border 4s linear infinite;}keyframes draw-border{0%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(90deg,#ff6b6b0%,transparent0%)border-box;}25%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(90deg,#ff6b6b100%,transparent100%)border-box;}25.01%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(180deg,#ffd93d0%,transparent0%)border-box;}50%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(180deg,#ffd93d100%,transparent100%)border-box;}50.01%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(270deg,#6bcb770%,transparent0%)border-box;}75%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(270deg,#6bcb77100%,transparent100%)border-box;}75.01%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(0deg,#4d96ff0%,transparent0%)border-box;}100%{background:linear-gradient(#12121a,#12121a)padding-box,linear-gradient(0deg,#4d96ff100%,transparent100%)border-box;}}/* 5. 虚线旋转边框SVG */.border-dash svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}.border-dash rect{fill:none;stroke:url(#gradient);stroke-width:2;stroke-dasharray:128;rx:16;ry:16;animation:dash-move1.5s linear infinite;}keyframes dash-move{to{stroke-dashoffset:-40;}}/style/headbodyh1CSS边框动画示例/h1divclassgrid!--旋转渐变--divclasscard border-rotateh2旋转渐变边框/h2p使用 conic-gradient伪元素实现彩虹色旋转效果/p/div!--流光--divclasscard border-shineh2流光边框/h2p高亮光线沿边框循环流动适合科技感UI/p/div!--呼吸发光--divclasscard border-glowh2呼吸发光边框/h2p边框颜色与 box-shadow 同步呼吸变化/p/div!--四边绘制--divclasscard border-drawh2四边依次绘制/h2p边框像画笔一样逐边绘制循环播放/p/div!--虚线动画--divclasscard border-dashsvg viewBox0 0 280 140preserveAspectRationonedefslinearGradient idgradientx10%y10%x2100%y2100%stop offset0%stop-color#ff6b6b/stop offset50%stop-color#4d96ff/stop offset100%stop-color#c77dff//linearGradient/defsrect x1y1width278height138//svgh2虚线流动边框/h2pSVGstroke-dasharray 实现虚线沿边框流动/p/div/div/body/html