CSS 动画-渐变段落-按钮边框 渐变段落<div style="background:#000"> <p class="text-flowLight"> 我是一段文字，看看看我的效果 </p> </div>.text-flowLight { position:relative; background-image:-webkit-linear-gradient(left,#1A3375,#b2c8ff,#1A3375 100%); -webkit-text-fill-color:transparent; -webkit-background-clip:text; -webkit-background-size:200% 100%; -webkit-animation:masked-animation 5s forwards linear infinite; font-weight:700; white-space:nowrap } @keyframes masked-animation { from { background-position:0 0 } to { background-position:-200% 0 } }按钮边框<div class="rabut"> <a href="###">炫酷边框特效</a> </div>body { background-color: black; } .rabut { width: 200px; height: 50px; color: #69ca62; /* 外面围绕的边框是真边框，眼睛看见的边框是阴影效果 */ box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5); background-color: #0f222b; } .rabut { text-align: center; margin: 100px auto; } .rabut, .rabut::before, .rabut::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .rabut::before, .rabut::after { content: ""; margin: -5%; box-shadow: inset 0 0 0 2px; animation: clipMe 8s linear infinite; } .rabut::before { animation-delay: -4s; } .rabut:hover::after, .rabut:hover::before { background-color: rgba(255, 0, 0, 0.3); } /* 核心：更改宽高后这下面的动画效果也需修改 */ @keyframes clipMe { 0%, 100% { /* 上 右 下 左*/ /* 上-下=-2px，右-右=220px 显示盒子上边框 */ clip: rect(0px, 220px, 2px, 0px); } 25% { /* 上-下=-70px，右-右=2px 显示盒子左边框 */ clip: rect(0px, 2px, 70px, 0px); } 50% { /* 上-下=-2px，右-右=220px 显示盒子下边框 */ clip: rect(68px, 220px, 70px, 0px); } 75% { /* 上-下=-70px，右-右=2px 显示盒子右边框 */ clip: rect(0px, 220px, 70px, 218px); } } .rabut a { font-size: 20px; line-height: 50px; text-decoration: none; color: #404d5b; }