zouyu

  • 图片上下循环滚动

    css3

    图片上下循环滚动

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style type="text/css">
      .daily-recommend-card {
        width: 756px;
        border-radius: 1rem;
        height: 198px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      img {
        animation: move-data 38s infinite;
        animation-direction: alternate; /* 动画应该轮流反向播放 */
      }

      @keyframes move-data {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-50%);
        }
      }
    </style>

    <div class="daily-recommend-card">
      <img
        src="https://p1.music.126.net/AhYP9TET8l-VSGOpWAKZXw==/109951165134386387.jpg?param=1024y1024"
      />
    </div>
  </body>
</html>
    上次更新: