css实现跑马灯效果

最新推荐文章于 2024-04-23 11:04:30 发布

居然鼬个高手

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量616

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/NY1007/article/details/127600743

版权

// clip 修饰的元素必须使用 position:absolute; 或者 position:fixed;		
CSS样式：
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      position: relative;
      background-color: #0f222b;
    }

    .div1 {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background: url(img/Button-White-Large.png) no-repeat 50%/70% rgba(0, 0, 0, 0.1);
      color: #69ca62;
      box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
    }

    .div1,
    .div1::before,
    .div1::after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .div1::before,
    .div1::after {
      content: '';
      z-index: -1;
      margin: -5%;
      box-shadow: inset 0 0 0 2px;
      animation: clipm 8s linear infinite;
    }

    .div1::before {
      animation-delay: -4s;
    }

    .div1:hover::after,
    .div1:hover::before {
      background-color: rgba(255, 0, 0, 0.3);
    }

    @keyframes clipm {
      0% {
        clip: rect(0px, 220.0px, 2px, 0px);
        /*裁剪*/
      }

      25% {
        clip: rect(0px, 2px, 220.0px, 0px);
      }

      50% {
        clip: rect(218.0px, 220.0px, 220.0px, 0px);
      }

      75% {
        clip: rect(0px, 220.0px, 220.0px, 218.0px);
      }

      100% {
        clip: rect(0px, 220.0px, 2px, 0px);
      }
    }

HTML结构：