css实现边框跑马灯效果（彩虹，渐变，叠加）

已于 2024-01-12 10:10:39 修改
阅读量2.4k 收藏 32
点赞数 27
分类专栏： CSS 文章标签： css css动画 跑马灯
于 2023-12-18 10:56:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianxintiandisheng/article/details/135057360
版权

效果展示

在这里插入图片描述

代码实战

方案一

效果预览

在这里插入图片描述

原理解析

修改背景的定位，生成动画

编码实战

<!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>border ranbom</title>
  <style>
    img {
      width: 380px;
    }

    .box {
      /* padding: 4px; */
      display: flex;
      align-items: center;
      justify-content: center;
      height: 400px;
      width: 400px;
      margin: auto;
      border: solid 1px;
      text-align: center;
    }

    .horse_run {
      background-image: linear-gradient(90deg,
          rgba(196, 233, 64, 0) 0%,
          green 40%,
          orange 40% 70%,
          red 70% 100%),
        linear-gradient(0deg,
          red 30%,
          orange 30% 60%,
          green 60%,
          rgba(196, 233, 64, 0) 100%),
        linear-gradient(-90deg,
          rgba(196, 233, 64, 0) 0%,
          green 40%,
          orange 40% 70%,
          red 70% 100%),
        linear-gradient(0deg,
          rgba(196, 233, 64, 0) 0%,
          green 40%,
          orange 40% 70%,
          red 70% 100%);
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;
      background-position: -100px 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px 0px;
      animation: moveLine 6s infinite linear;
      /* height: calc(100% - 2px); */
      /* padding: 0px; */
      background-clip: content-box;
    }

    @keyframes moveLine {
      0% {
        background-position: -100px 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px 0px;
      }

      5% {
        background-position: 0px 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px -100px;
      }

      30% {
        background-position: 100% 0px, calc(100% - 0px) -100px, calc(100% + 100px) calc(100% - 0px), 0px -100px;
      }

      35% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) 0px, calc(100% + 100px) calc(100% - 0px), 0px -100px;
      }

      50% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) 100%, calc(100% + 100px) calc(100% - 0px), -100px -100px;
      }

      55% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), 100% calc(100% - 0px), -100px calc(100% + 100px);
      }

      80% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), 0px calc(100% - 0px), 0px calc(100% + 100px);
      }

      85% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), -100px calc(100% - 0px), 0px 100%;
      }

      100% {
        background-position: calc(100% + 100px) 0px, calc(100% - 0px) calc(100% + 100px), -100px calc(100% - 0px), 0px 0px;
      }
    }
  </style>
</head>

<body>
  <div class="box horse_run">
    <img alt="图片"
      src="https://profile-avatar.csdnimg.cn/16a636bfaafa4441b119d1c92e27651e_tianxintiandisheng.jpg!1">
  </div>

</body>

</html>

方案二

效果预览

在这里插入图片描述

原理

大盒子超出隐藏，利用伪类设置背景颜色，通过动画旋转，并在盒子里面设置一个遮罩层，遮罩层比大盒子小，露出边框达到效果

此方案还有色彩的重叠，但是有个小缺点，旋转的时候有斜边，无斜边的见方案三
在这里插入图片描述

编码实战

<!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>border ranbom</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }

        .div3 {
            width: 300px;
            height: 300px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                position: relative;
                z-index: 10;
                width: 280px;
            }
        }

        .div3::after {
            content: '';
            position: absolute;
            left: -50%;
            top: -50%;
            width: 200%;
            height: 200%;
            background-repeat: no-repeat;
            background-size: 60% 60%, 40% 40%;
            background-position: 0 0, 100% 0, 100% 100%, 0 100%;
            background-image:
                linear-gradient(to left, #27FE03, rgba(255, 255, 255, 0)),
                linear-gradient(#814FFE, #814FFE),
                linear-gradient(#814FFE, #814FFE),
                linear-gradient(#814FFE, #814FFE),
                linear-gradient(#814FFE, #814FFE);
            animation: div3Rotate 3s linear infinite;
        }

        .div3>div {
            position: absolute;
            left: 5px;
            top: 5px;
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            background: #ffffff;
            z-index: 2;
            padding: 20px;
            box-sizing: border-box;
        }

        @keyframes div3Rotate {
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>

    <div class="div3">
        <div>
            大盒子超出隐藏，利用伪类设置背景颜色，通过动画旋转，
            并在盒子里面设置一个遮罩层，遮罩层比大盒子小，露出边框达到效果
        </div>
    </div>

</body>

</html>

方案三

效果预览

在这里插入图片描述

原理解析

使用clip-path 裁剪边框，形成动画

clip-path 本身是可以进行坐标点的动画的，从一个裁剪形状变换到另外一个裁剪形状。

编码实战

<!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>border ranbom</title>
  <style>
    body{
      display: flex;
      align-items: center;
      justify-content: center;
      
    }
    .div5 {
      width: 219px;
      height: 219px;
      position: relative;
      color: #fff;
      border: 6px solid #814FFE;
      background: #ffd700;
      transition: all .3s;
    }

    .div5::before {
      content: "";
      position: absolute;
      top: -6px;
      left: -6px;
      right: -6px;
      bottom: -6px;
      border: 6px solid;
      border-image-slice: 1;
      animation: div5Ani 3s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      border-image-source: linear-gradient(to left, #27FE03, rgba(255, 255, 255, 0));
      clip-path: inset(0 0 98% 0);
    }


    @keyframes div5Ani {

      0%,
      100% {
        border-image-source: linear-gradient(to bottom, #27FE03, rgba(255, 255, 255, 0));
        clip-path: inset(0 98% 0 0);
      }
      25% {
        border-image-source: linear-gradient(to left, #27FE03, rgba(255, 255, 255, 0));
        clip-path: inset(0 0 98% 0);
      }

      50% {
        border-image-source: linear-gradient(to top, #27FE03, rgba(255, 255, 255, 0));
        clip-path: inset(0 0 0 97%);
      }

      75% {
        border-image-source: linear-gradient(to right, #27FE03, rgba(255, 255, 255, 0));
        clip-path: inset(98% 0 0 0);
      }

   
    }
  </style>
</head>

<body>
  <div class="div5">
  </div>

</body>

</html>

参考资料

天心天地生
关注
专栏目录
CSS技巧专栏：一日一例 2.纯CSS实现 多彩边框按钮特效
uu0216的博客
07-09 1038
content:attr(alt); 通过attr函数 获取本标签的alt值，之所以要这么做，是因为after生成的填充色的图层，会覆盖到按钮上面，导致按钮上写的文字不可见。所以，我们要通过content来输出按钮上的文字。这样写，也是为了让样式和内容脱离。这样我们在html的代码上，给 button 控件写上 alt文字，就可以通过css获取这个文字并输出了。这样，也方便后台程序通过程序动态修改 alt标签输出 的文字，达到修改按钮文字的目标，而不需要去手动修改css文件中的文字。
纯CSS实现跑马灯效果
小陈的博客
01-31 4152
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问
利用CSS3的线性渐变linear-gradient制作边框的示例
09-24
linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例
用CSS画一道彩虹
Dax1_的博客
07-27 915
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="rainbow"> <div> <div> <div> <div> &lt
css 边框流光效果
最新发布
qq_43086723的博客
09-30 742
css 边框流光效果
CSS 之 跑马灯边框
weixin_45092437的博客
01-15 2346
尝试实现一下跑马灯样式的边框，虽然这种样式并不常见（基本没卵用），其使用场景我至今没想到，但是它足够花里胡哨，玩的就是花活。经过一番实践，我实现了两种形态的跑马灯样式边框，其效果如下图所示。其主要使用的CSS属性有：`overflow`、`position`、`transform`、` animation`、`@keyframes`以及`::after`和`::before`等等。
clip样式实现炫酷简单CSS动画特效----RGB走马灯边框线 直接复制可用 新手练习可用
04-03
clip样式实现炫酷简单CSS动画特效----RGB走马灯边框线 直接复制可用 新手练习可用
CSS按钮-跑马灯边框
薛定谔的壳的博客
08-29 1240
思路很简单，实现方法有很多很多。但是大体思路与实现方法都类似：渐变色 + 动画，主要区别在动画的具体实现。
css实现边框跑马灯效果
TarkuNi的博客
07-03 3827
先上效果图 1.先整个div边框 <div class="box horse_run">小马跑起来~</div> 2.书写css样式 .box { height: 300px; width: 400px; box-shadow: 0 0 3px orange; text-align: center; line-height: 280px; } .horse_run { background-image: linear-gradient(90de
纯CSS实现边框流光效果（跑马灯效果）
热门推荐
weixin_52057286的博客
03-27 1万+
使用css3新特性——动画，实现一个边框跑马灯效果
纯css3实现走马灯效果
09-25
主要介绍了纯css3实现走马灯效果，主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，有需要的小伙伴参考下
jquery+CSS3做的走马灯（跑马灯）效果
11-28
纯jQuery+CSS3做的，避免marquee控件在部分浏览器上不支持的尴尬；原代码源自网络，但对原功能做了整改，使其支持动态添加、删除走马灯消息，另外对原代码进行精简，并添加详细中文注释，供参考学习； 代码资源仅为页面代码，jquery的js文件自行修改添加，相信这难不倒大家
HTML + CSS 彩虹按钮样式
05-25
以下是一个简单的彩虹渐变示例： ```css .rainbow-btn { background-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082); background-size: 200% 200%; animation: rainbow ...
html实现边框颜色渐变,渐变边框的实现方式
weixin_30990605的博客
06-15 3781
前言我们在 css 里可以直接使用 border 属性指定元素的边框，但这样的方法具有局限性，就是只能添加单色的边框，如果需要给元素添加渐变的边框，又该如何实现呢？利用 border-imagebutton.btn {display: inline-flex;align-items: center;justify-content: center;cursor: pointer;user-selec...
理解CSS margin塌陷与创建彩虹效果
这种方法巧妙地利用了边框的颜色渐变和形状变化来创造出视觉上的彩虹效果。 总结来说，本文通过实例讲解了CSS中的margin塌陷原理，以及如何利用这个特性进行创意设计，如制作彩虹效果。这不仅帮助开发者理解CSS的...
css两种方式实现彩虹
dhdclsdwdsnxhg的博客
01-28 238
第一种 css <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>background-size</title> <style type="text/css"> .box1 { width: 400px; height: 200px; overflo
css 实现跑马灯效果
拿回忆下酒
12-04 6227
最近有一个跑马灯的效果，需要实现。本来想偷个懒从网上随便拷贝一个，结果发现都不太理想，于是自己动手封装了一个，和大家分享一下。 首先我们要知道跑马灯的具体效果是什么样子的。 效果图 我们通过效果图可以看到，在可是区域内有一行文字，当文字从左侧消失后，需要在右侧展示，一直循环展示。 上代码 //html <div class="box"> <p class="txt" v-for="(n,j) in 2" :key="j">将要跑起来的文案--------------跑起来&l
CSS 实现跑马灯效果 开箱即用
谢院柯的博客
03-22 2198
html <div class="marquee-box"> <div class="marquee-content" :style="{animationDuration: marqueeStr.length * 0.2 + 5 + 's'}"> {{marqueeStr}} </div> </div> 变量 this.marqueeStr= "跑马灯！！！跑马灯！！！" css @keyf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值