• 中文
  • 注册
  • 代码教程 代码教程 关注:3 内容:30

    HTML内容轮播之纯Css文字轮播轮播【记录】

  • 查看作者
  • 打赏作者
    • 代码教程
    • 9 渡劫 后期
      2021

      HTML内容轮播之纯Css文字轮播轮播

      HTML

      <div class="div1">
          <div class="div2">
              <p>111111111111111111111</p>
              <p>211111111111111111111</p>
              <p>311111111111111111111</p>
              <p>411111111111111111111</p>
              <p>511111111111111111111</p>
              <p>611111111111111111111</p>
              <p>711111111111111111111</p>
              <p>2211111111111111111111</p>
              <p>331111111111111111111</p>
              <p>441111111111111111111</p>
              <p>551111111111111111111</p>
              <p>661111111111111111111</p>
              <p>771111111111111111111</p>
              <p>881111111111111111111</p>
              <p>991111111111111111111</p>
              <p>001111111111111111111</p>
          </div>
      </div>

      css

      .div1 {
          width:200px;
          height:200px;
          overflow:hidden;
          margin:auto;
          position:relative;
      }
      @keyframes anis {
          100% {
          transform:translateY(-200px)
      }
      }img {
          position:absolute;
      }
      .div2 {
          animation:anis 10s linear infinite;
      }
      .div2:hover {
          animation-play-state:paused;
      }

      请登录之后再进行评论

      登录
    • 做任务
    • 偏好设置
    • 到底部
    • 帖子间隔 侧栏位置: