纯CSS无限上划动画效果

最新推荐文章于 2024-08-21 16:08:40 发布

j73909

最新推荐文章于 2024-08-21 16:08:40 发布

阅读量192

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/j73909/article/details/109495950

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!-- saved from url=(0040)https://diaosi19.com/demo/scrollCss.html -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>css实现无缝滚动</title>
  <style>
    .list {
      position: relative;
      width: 300px;
      height: 200px;
      padding: 20px;
      margin: 20px auto;
      border-top: 40px solid #fff;
      border-bottom: 40px solid #fff;
      outline: 1px solid #999;
      overflow: hidden;
      text-align: center;
      box-sizing: padding-box;
    }
    .list .rowup {
      position: relative;
      -webkit-animation: 1s rowup linear infinite normal;
      animation: 1s rowup linear infinite normal;
    }
    .list .rowup:hover{
      animation-play-state:paused;
      -webkit-animation-play-state:paused;
    }
  	.list .item{
        line-height: 2;
      font-size: 140%;
  	}
    .list .item:nth-of-type(1),
    .list .item:nth-of-type(10){
      color: red;
    }
    @keyframes rowup {
      0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }

      100% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
  </style>
</head>
<body>
  <div class="list">
    <div class="rowup">
      <div class="item">西江月</div>
      <div class="item">自幼曾攻经史</div>
      <div class="item">长成亦有权谋</div>
      <div class="item">恰如猛虎卧荒丘</div>
      <div class="item">潜伏爪牙忍受</div>
      <div class="item">不幸刺文双颊</div>
      <div class="item">那堪配在江州</div>
      <div class="item">他年若得报冤仇</div>
      <div class="item">血染浔阳江口</div>
      <div class="item">西江月</div>
      <div class="item">自幼曾攻经史</div>
      <div class="item">长成亦有权谋</div>
      <div class="item">恰如猛虎卧荒丘</div>
      <div class="item">潜伏爪牙忍受</div>
      <div class="item">不幸刺文双颊</div>
      <div class="item">那堪配在江州</div>
      <div class="item">他年若得报冤仇</div>
      <div class="item">血染浔阳江口</div>
    </div>
  </div>
</body>
</html>

j73909

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS无限上划动画效果

<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=.
复制链接

扫一扫

专栏目录