keyframes弹幕实现

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

接到的任务里面有弹幕，头疼，该怎么去实现呢？定时将内容换掉？操作DOM？这样也太麻烦了吧！然后前辈就给我提了一个用keyframes属性的方案，刚开始我也是拒绝的，在我印象中，这个似乎很麻烦，但是用了之后，艾玛，真香，简直爱了爱了~ 下面就来说说这个keyframes属性吧

介绍keyframes

简单来说，keyframes就是自定义的样式转变方式

语法

@keyframes name {
    from {
        从XXX样式
    }
    to {
        变化到XXX样式
    }
}

//或者变为百分比
@keyframes name {
    0% {
        0%的时候XX样
    }
    50% {
        50%的时候XX样
    }
    ...
    100% {
       100%的时候XX样 
    }
}

运用keyframes

定义好样式的怎么变了，怎么用呢？这时候就要通过CSS3的animation(动画)属性去绑定了。

//animation语法,还有一些的，但是这里我只用了这几个，所以就只介绍了这几个

animation: 动画名称 动画完成时间 动画完成方式(匀速?) 动画执行次数;

下面开启弹幕实战时间

实现的思路：设置一个弹幕可视区域，超过这个范围，不可看见；将弹幕排成一排，从右到左滑动，这样就可以实现弹幕功能了，哈哈，是不是很简单,下面让我们来看一下代码吧

布局方式

    <div class="box">
        <ul class="info">
          <li>
            <img class="avatar" src="./user1.png"/>
            <span class="content">我是弹幕弹幕弹幕</span>
          </li>
          <li>
            <img class="avatar" src="./user2.png"/>
            <span class="content">好看好看很好看看看看</span>
          </li>
        </ul>
    </div>

样式设置

        /* 别忘了先清除元素自带的样式哦 */
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 255px;
        height: 31px;
        border-radius: 19px 0px 0px 19px;

        background-color: bisque;
        margin: 20px auto;
      }
      .box .info {
        width: 520px;
        height: 100%;
        list-style: none;
        /* 将弹幕移到最右边滚动 */
        transform: translateX(225px);
      }
      .info li {
        float: left;

        width: 255px;
        height: 100%;
        background-color: plum;
        border-radius: 19px 0px 0px 19px;
      }
      li .avatar {
        float: left;
        width: 27px;
        height: 27px;
        border: 1px solid #ffffff;
        border-radius: 50%;
      }
      li .content {
        float: left;
        height: 31px;
        color: #fff;
        font-size: 12px;
        padding-left: 7px;
        line-height: 31px;
      }

布局就🙅🏻‍♀️好了，效果如下：

接下来该让他滚起来了

设置keyframes属性：

@keyframes scroll2 {
  0% {
  /**起点在最右边*/
    transform: translateX(225px);
  }
  33% {
    transform: translateX(0px);
  }
  66% {
    transform: translateX(-260px);
  }
  100% {
    transform: translateX(-520px);
  }
}

给ul添加animation动画：

animation: 12s scroll2 infinite linear;

在设置点背景颜色，让弹幕更好看哦

最后效果：(录屏不太行哦)

最终css代码：

      /* 别忘了先清除元素自带的样式哦 */
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: #1e2b1b;
      }
      .box {
        width: 255px;
        height: 31px;
        border-radius: 19px 0px 0px 19px;
        margin: 20px auto;
      }
      .box .info {
        width: 520px;
        height: 100%;
        list-style: none;
        animation: 12s scroll2 infinite linear;
      }
      .info li {
        float: left;
        width: 255px;
        height: 100%;
        border-radius: 19px 0px 0px 19px;
        background: linear-gradient(
          90deg,
          rgba(253, 150, 51, 0.46) 0%,
          rgba(119, 169, 107, 0.36) 59%,
          rgba(254, 205, 168, 0) 100%
        );
      }
      li .avatar {
        float: left;
        width: 27px;
        height: 27px;
        border: 1px solid #ffffff;
        border-radius: 50%;
      }
      li .content {
        float: left;
        height: 31px;
        color: #fff;
        font-size: 12px;
        padding-left: 7px;
        line-height: 31px;
      }
      @keyframes scroll2 {
        0% {
          transform: translateX(225px);
        }
        33% {
          transform: translateX(0px);
        }
        66% {
          transform: translateX(-260px);
        }
        100% {
          transform: translateX(-520px);
        }
      }

好了，keyframes就这样介绍完了，有什么不足之处欢迎大佬指出来哈,886~