纯css实现（简单）跑马灯效果

最新推荐文章于 2024-05-30 10:50:01 发布

weixin_42116704

最新推荐文章于 2024-05-30 10:50:01 发布

阅读量195

点赞数

文章标签： css css3 动画

本文链接：https://blog.csdn.net/weixin_42116704/article/details/127552650

版权

该效果只适用于简单的动画效果，复杂效果，还是需要通过js来实现完成

html结构

<div class="vertical-carousel">
    <div class="ol">
           <p class="li">1111111111111</p>
           <p class="li">22222222222222222222</p>
           <p class="li">333333333333333333</p>
           <p class="li">444444444444</p>
    </div>
</div>

css样式

/* 跑马灯 */
.vertical-carousel {
    overflow: hidden;
    width: 100%;
    height: 1rem;
    /* text-align: center; */
    /* margin: 1.5em 0; */
}
.vertical-carousel .ol {
    list-style-type: none;
    animation: vertical-move2 6s linear infinite;
    /* 容器的高度，似乎纯CSS的话只能写死 */
    transform: translate(0, 2em);
}
.vertical-carousel .ol .li {
    line-height: 1rem;
    /* height: 3em; */
    padding: 0;
}
@keyframes vertical-move2 {
    0% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
    20% {
      -webkit-transform: translateY(0px);
      transform: translateY(0px);
    }
    25% {
      -webkit-transform: translateY(-1rem);
      transform: translateY(-1rem);
    }
    45% {
      -webkit-transform: translateY(-1rem);
      transform: translateY(-1rem);
    }
    50% {
      -webkit-transform: translateY(-2rem);
      transform: translateY(-2rem);
    }
    70% {
      -webkit-transform: translateY(-2rem);
      transform: translateY(-2rem);
    }
    75% {
      -webkit-transform: translateY(-3rem);
      transform: translateY(-3rem);
    }
    95% {
      -webkit-transform: translateY(-3rem);
      transform: translateY(-3rem);
    }
    100% {
      -webkit-transform: translateY(-4rem);
      transform: translateY(-4rem);
    }
}
/* 跑马灯 end */