使用CSS实现按钮边缘跑马灯动画

刘为真 發表於 2026-5-3 22:17:07

<p style="text-align: left;">先来看看效果：</p>
<p style="text-align: center;"><img src="https://img.jbzj.com/file_images/article/202304/2023042814424069.gif" alt="在这里插入图片描述" /></p>
<h3>制作过程：</h3>
<h4><strong>1. 定义标签，a标签是按钮，4个span就是按钮周围那四条行动的蓝边。：</strong></h4>
<p> </p>
<div class="jb51code">
<pre class="brush:xhtml;">
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
   <span></span>
   <span></span>
   <span></span>
   <span></span>
      night
</a>
</pre>
</div>
<h4><strong>2. 定义按钮.night的基本样式：</strong></h4>
<div class="jb51code">
<pre class="brush:css;">
.night{
         position: relative;
         width: 300px;
         height: 100px;
         color: rgb(18, 190, 243);
         letter-spacing: 12px;
         font-size: 50px;
         line-height: 100px;
         text-align: center;
         /* background-color: rgb(31, 49, 133); */
         background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
         text-transform: uppercase;
         user-select: none;
         text-decoration: none;
         overflow: hidden;
         box-shadow: inset 0 0 10px rgb(14, 20, 105),
         0 0 5px rgb(9, 208, 235);
         transition: all 0.5s;

   }<font face="Tahoma"><span style="white-space: normal;"> </span></font></pre>
</div>
<p>position ：相对定位。</p>
<p>letter-spacing：字间距。</p>
<p>linear-gradient：渐变颜色。</p>
<p>text-transform：全部字母为大写。</p>
<p>user-select：文本不可选中。</p>
<p>text-decoration：消除默认下划线。</p>
<p>overflow：溢出隐藏。</p>
<p>box-shadow：阴影。</p>
<p>transition：过渡效果。</p>
<h4><strong>3. 鼠标经过按钮样式变化：</strong></h4>
<div class="jb51code">
<pre class="brush:css;">
.night:hover{
         text-shadow: 0 0 5px rgb(18, 190, 243),
         0 0 8px rgb(18, 190, 243),
         0 0 10px rgb(18, 190, 243);
         background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
         box-shadow: inset 0 0 10px rgb(14, 20, 105),
         0 0 5px rgb(9, 208, 235),
         0 0 10px rgb(9, 208, 235);
   }
</pre>
</div>
<p>text-shadow：文字阴影。</p>
<p>lineear-gradient：渐变色变化。</p>
<p>box-shadow：盒子阴影变化。</p>
<h4><strong>4. 4条span的基本样式：</strong></h4>
<div class="jb51code">
<pre class="brush:css;">
.night span{
         position: absolute;
   }
</pre>
</div>
<p>absolute 绝对定位</p>
<h4><strong>5. 设置按钮上方那条运动蓝线样式：</strong></h4>
<div class="jb51code">
<pre class="brush:css;">
.night span:nth-child(1){
         top: 0;
         left: 0;
         width: 100%;
         height: 2px;
         background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
         animation: move1 2s linear infinite;
   }
   @keyframes move1 {
         0%{
            transform: translateX(-100%);
         }
         100%{
            transform: translateX(100%);
         }
   }
</pre>
</div>
<p>linear-gradient：渐变色。</p>
<p>transparent为透明色。</p>
<p>animation：设置动画，让蓝线运动起来。</p>
<p>transform: translateX(-100%); 在X轴上的偏移为-100%。</p>
<p>transform: translateX(100%); 让它偏移到100%。</p>
<h4><strong>6. 以此类推，其它三条也设置动画，再让左边和右边那条设置动画延迟便可。：</strong></h4>
<div class="jb51code">
<pre class="brush:css;">
.night span:nth-child(2){
         top: 0;
         right: 0;
         width: 2px;
         height: 100%;
         transform: translateY(-100%);
         background-image: linear-gradient(to bottom,transparent ,rgb(0, 153, 255));
         animation: move2 2s linear infinite;
         animation-delay: 1s;
   }
   @keyframes move2 {

         100%{
            transform: translateY(100%);
         }
   }
   .night span:nth-child(3){
         left: 0;
         bottom: 0;
         width: 100%;
         height: 2px;
         background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
         animation: move3 2s linear infinite;
   }
   @keyframes move3 {
         0%{
            transform: translateX(100%);
         }
         100%{
            transform: translateX(-100%);
         }
   }
   .night span:nth-child(4){
         top: 0;
         left: 0;
         width: 2px;
         height: 100%;
         transform: translateY(100%);
         background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
         animation: move4 2s linear infinite;
         animation-delay: 1s;
   }
   @keyframes move4 {
         100%{
            transform: translateY(-100%);
         }
   }
</pre>
</div>
<p>animation-delay: 1s; 设置动画延迟1秒播放。</p>
<h3>完整代码：</h3>
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
   *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
   }
   body{
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: rgb(4, 4, 19);
   }
   .night{
         position: relative;
         width: 300px;
         height: 100px;
         color: rgb(18, 190, 243);
         letter-spacing: 12px;
         font-size: 50px;
         line-height: 100px;
         text-align: center;
         /* background-color: rgb(31, 49, 133); */
         background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
         text-transform: uppercase;
         user-select: none;
         text-decoration: none;
         overflow: hidden;
         box-shadow: inset 0 0 10px rgb(14, 20, 105),
         0 0 5px rgb(9, 208, 235);
         transition: all 0.5s;

   }
   .night:hover{
         text-shadow: 0 0 5px rgb(18, 190, 243),
         0 0 8px rgb(18, 190, 243),
         0 0 10px rgb(18, 190, 243);
         background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
         box-shadow: inset 0 0 10px rgb(14, 20, 105),
         0 0 5px rgb(9, 208, 235),
         0 0 10px rgb(9, 208, 235);
   }

   .night span{
         position: absolute;
   }
   .night span:nth-child(1){
         top: 0;
         left: 0;
         width: 100%;
         height: 2px;
         background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
         animation: move1 2s linear infinite;
   }
   @keyframes move1 {
         0%{
            transform: translateX(-100%);
         }
         100%{
            transform: translateX(100%);
         }
   }
   .night span:nth-child(2){
         top: 0;
         right: 0;
         width: 2px;
         height: 100%;
         transform: translateY(-100%);
         background-image: linear-gradient(to bottom,transparent ,rgb(0, 153, 255));
         animation: move2 2s linear infinite;
         animation-delay: 1s;
   }
   @keyframes move2 {

         100%{
            transform: translateY(100%);
         }
   }
   .night span:nth-child(3){
         left: 0;
         bottom: 0;
         width: 100%;
         height: 2px;
         background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
         animation: move3 2s linear infinite;
   }
   @keyframes move3 {
         0%{
            transform: translateX(100%);
         }
         100%{
            transform: translateX(-100%);
         }
   }
   .night span:nth-child(4){
         top: 0;
         left: 0;
         width: 2px;
         height: 100%;
         transform: translateY(100%);
         background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
         animation: move4 2s linear infinite;
         animation-delay: 1s;
   }
   @keyframes move4 {
         100%{
            transform: translateY(-100%);
         }
   }
</style>
</head>
<body>
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
   <span></span>
   <span></span>
   <span></span>
   <span></span>
      night
</a>
</body>
</html>
</pre>
</div>

頁: [1]

琼殿技术论坛's Archiver

使用CSS实现按钮边缘跑马灯动画