css做一个页面循环滚动效果（仿歌词滚动）

最新推荐文章于 2024-04-30 14:33:10 发布

我是梦磊OL

最新推荐文章于 2024-04-30 14:33:10 发布

阅读量359

点赞数

分类专栏： html 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/m0_68094390/article/details/130682090

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1，html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
   .one {
 background-color: darkorange;
   width: 100px;
      height: 100px;

}
 .two {
  background-color: blueviolet;
   width: 290px;
  height: 100px;
}

.first{


  position: relative;
  top: 100px;
  left: 100px;
  background-color: #19CAAD;
  width: 400px;
  height:220px;
  overflow: hidden;

}
.firstitem{
  flex-wrap: wrap;
  gap: 10px;
   display: flex;
  width: 400px;
  height:220px;
  animation: scroll 10s cubic-bezier(.63,.37,.79,.75) infinite;

}
@keyframes scroll {


  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
  0%{
    transform: translateY(100%);
  }

}
  </style>
</head>
<body>
<div id="app">
    <el-button type="primary">主要按钮</el-button>
  <div class="">
    <div class="first">
    <div class="firstitem">
      <div class="one">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      fit="cover"></el-image>
    </div>

    <div class="two">
      <br>
     是柚肉呀：故事不长也不短，当初给她唱丫头的那个男孩子结婚了
    </div>

    <div class="one">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      fit="cover"></el-image>
    </div>

    <div class="two">
      <br>
     是柚肉呀：故事不长也不短，当初给她唱丫头的那个男孩子结婚了
    </div>
    </div>
  </div>
  </div>
</div>
</body>

 <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          url:'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28821a693fb64055ae8893d5fdebccdf~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?'
        }
      }
    })
  </script>
</html>