【纯css】实现无限滚动循环组件，无js

最新推荐文章于 2023-08-31 15:06:16 发布

KatyLight

最新推荐文章于 2023-08-31 15:06:16 发布

阅读量605

点赞数

分类专栏：样式文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_33014695/article/details/125536545

版权

样式专栏收录该内容

32 篇文章 0 订阅

订阅专栏

实现原理是两个一样内容的div的transform css动画。

把背景图片改成透明可能更加好看一些没有css动画产生的裂缝。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .view{
      display: block;
      height: 200px;
      width: 400px;
      border: 1px solid black;
      overflow: hidden;
      position: absolute;
      left: 400px;
      top: 200px;
    }
    .view>.page{
      animation: dot linear 3s infinite;
      /*border: 1px solid black;*/
      /*border-bottom: 1px solid black;*/
      height: auto;
      padding: 10px;
      color: white;
      box-sizing: border-box;
      background-image: linear-gradient(red,blue);width: 100%;
    }
    @keyframes dot {
      0%{
        transform: translateY(0);
      }100%{
         transform: translateY(-100%);
       }

    }
  </style>
</head>
<body>
<div class="view">
  <div class="page" style="">
    <h1>hello-word111</h1>
    <h1>hello-word222</h1>
    <h1>hello-word333</h1>
    <h1>hello-word444</h1>
    <h1>hello-word555</h1>
  </div>
  <div class="page" style="">
    <h1>hello-word111</h1>
    <h1>hello-word222</h1>
    <h1>hello-word333</h1>
    <h1>hello-word444</h1>
    <h1>hello-word555</h1>
  </div>
</div>
</body>
</html>