css3做一个滚动条

最新推荐文章于 2024-07-27 02:24:11 发布

AmberWu

最新推荐文章于 2024-07-27 02:24:11 发布

阅读量947

点赞数

分类专栏：技术类文章标签： css3

本文链接：https://blog.csdn.net/AmberWu/article/details/73136197

版权

技术类专栏收录该内容

68 篇文章 1 订阅

订阅专栏

先上效果图：

这里写图片描述

html代码很简单：

<div>
    <span class="wrap">
        <span class="wrap">周一吴琼琼不想上班；周二吴琼琼不想上班；周三吴琼琼不想上班；周四吴琼琼不想上班；周五吴琼琼不想上班；</span>
    </span>
  </div>

css:

  @keyframes anim-CarouselLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  @-webkit-keyframes anim-CarouselLeft {
    0% {
      -webkit-transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-50%);
    }
  }

  div {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 381px;
    margin-top: 231px;
  }

  .wrap {
    display: inline-block;
    -webkit-transform: transitionZ(0);
    transform: transitionZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-animation: anim-CarouselLeft 50s linear 0s infinite;
    animation: anim-CarouselLeft 10s linear 0s infinite;
  }