css 停顿轮播动画，竖向滚动

已于 2024-01-12 09:48:03 修改
阅读量477 收藏 8
点赞数 6
文章标签： css 前端
于 2024-01-12 09:46:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mo_jon/article/details/135544667
版权
本文介绍了如何利用HTML和CSS创建一个资讯列表，通过CSS动画实现逐条显示并滚动加载的效果，提高用户体验。
摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .list-box {
        height: 30px;
        display: flex;
        line-height: 30px;
        overflow: hidden;
      }
      .list-box .list {
        width: 0;
        margin-left: 20px;
        flex: 1;
        animation: scroll 10s ease 1s infinite; /* 应用动画效果 */
      }
      .list-box * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      @keyframes scroll {
        0% {
          transform: translateY(0); /* 第一条信息 */
        }
        20% {
          transform: translateY(-100%); /* 第二条信息 */
        }
        40% {
          transform: translateY(-200%); /* 第三条信息 */
        }
        60% {
          transform: translateY(-300%); /* 第四条信息 */
        }
        80% {
          transform: translateY(-400%); /* 第五条信息 */
        }
        100% {
          transform: translateY(-480%); /* 最终位置,防止空白和回退 */
        }
      }
    </style>
  </head>
  <body>
    <div class="list-box">
      <h4 class="title">资讯：</h4>
      <ul class="list">
        <li>第一条信息</li>
        <li>第二条信息</li>
        <li>第三条信息</li>
        <li>第四条信息</li>
        <li>第五条信息</li>
      </ul>
    </div>
  </body>
</html>
Mo_jon
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css样式——垂直轮播
qq_52695936的博客
07-20 396
card类的样式规则设置了宽度为430px，高度为100px，并设置了内边距为0 20px。.container类的样式规则设置了宽度为500px，高度为300px，并将position属性设置为relative。只是一个自定义属性，和CSS中的其他属性一样，你可以使用它来存储任何你想要的值，并在样式规则中引用它。子元素的宽度为90px，高度为90px，并设置了其position属性为absolute，意味着。关键帧，元素的不透明度为1，没有上下平移，保持原位置，缩放为原来的大小。
js+css3文字上下滚动切换动画特效
06-11
一款简单的js+css3文字上下滚动切换动画特效，可设置多种不同颜色的文字。
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图效果，需要的朋友参考下吧
通过css动画实现一个表格滚动轮播效果
12-28
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下 <template> <section> <div class=box> <ul class=header> <li class=cell>序号</li> <li class=cell>姓名</li> <li class=cell>年龄</li> <li class=cell>性别</li> <li class=cell>专业</li> </ul>
JS——初级轮播图的实现（纵向）
进击的葱
01-07 2953
描述： 纵向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉），核心知识是数据驱动图像的透明度达到效果。 效果： 代码： js文件： /* * 工厂模式 * */ var Method=(function () { return { loadImage:function (arr,callback) { ...
Jquery结合div+css实现文字间断停顿向上滚动效果
weixin_30505751的博客
03-09 554
这篇文章的标题不知道怎么些才好，那就说一下它实现的功能以及长处吧。 1、使用Jquery操作对象 2、使用div+css控制样式 3、可以自定义停顿时间 4、滚动实现了动画效果，可以控制滚动速度 5、可以设置每次滚动的长度 6、鼠标悬停时停止滚动，鼠标移出后继续滚动 查看代码： 查看源代码 ...
html中动画纵向循环播放,CSS3实现的循环动画
weixin_39598796的博客
05-31 379
CSS语言：CSSSCSS确定body {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: cente...
css动画中间暂停几秒,详解css3中两种暂停方式（transition、animation）
weixin_39562089的博客
08-04 3110
让坐标变化的两种方式：1.传统的top,left坐标修改2.CSS3中的transform属性通过CSS3的animation与transition的结合实现了人物的走路的效果。一般来说运动的状态都是需要可控的，这样才方便我们做进一步的操作。利用animation实现了人物动作的变化，即更换了精灵图的位置，而transition是实现了人物的left变化，即坐标向右移动，人物向前走，背景向后走。t...
css实现滚动(从下往上),鼠标进入时悬停
anny_mei的博客
03-14 2562
文字滚动
【CSS】垂直滚动公告
最新发布
Jooan的博客
01-10 468
CSS制作的垂直滚动公告，支持多条切换
轮播图
ZJQ12334的博客
07-25 404
细节部分 细节部分： 1、点击上图的左右箭头，分别跳转到上一张图或者下一张图！ （1）点击上一张图就是让一个变量进行递增，点击下一张就是让一个变量进行递减！ 2、点击右小角小圆点也可以进行图片的轮播 （1）通过索引让变量进行随意的修改 3、每间隔2秒时间，进行轮播图自动的切换 （1）涉及到定时器 关于DOM0级事件和DOM2级事件： 1、DOM0级事件：只能给一个元素的某一个行为绑定一次事件，第二次绑定的话会把前面的覆盖掉！ 2、DOM2级事件：可以给某一个元素的同一个行为绑定多个，不同的办法！ 关于监.
css实现竖向步骤条.zip
09-21
css实现竖向步骤条.zip
css3炫酷100周年数字滚动动画特效
06-11
css3炫酷100周年数字滚动动画特效，1920-2020一百周年年份滚动动画效果，字体颜色和页面背景色也会跟着变化。
CSS3动画animation实现云彩向左滚动
01-19
实现的图像动画效果大致是这样的：云彩向左滚动！ 【代码效果】 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>CSS3动画animation实现漂浮的云&lt...
css纵向无缝滚动
大熊的博客
07-06 688
image <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>marquee</title> <style> @-webkit-keyframes scrollText1 { ...
css 常用滚动条
qq_34114535的博客
04-21 422
*滚动条的背景区域的圆角*//*滚动条的背景颜色*//*滚动条的背景区域的内阴影*//*滑块 滚动条的内阴影*/
微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）
kissship的博客
10-17 2161
Flex 弹性布局是一种用于网页布局的现代 CSS 技术，旨在更灵活地管理容器内的元素排列和分布，以实现响应式设计和更好的页面布局控制。Flex 布局基于弹性盒子模型，通过使用属性，你可以将一个容器转变为一个弹性容器，从而控制其内部子元素的排列方式。
移动端flex垂直方向滚动条高度幽灵 视口详解 布局视口 视觉视口 理想视口
qq_44129572的博客
04-21 475
移动端布局视口宽度会被内容撑开，布局视口高度会跟着布局视口宽度变化。 移动端flex高度问题，高度幽灵，垂直方向滚动条 获取布局视口，获取视觉视口，理想视口
css实现div自动添加纵向滚动条
weixin_33806509的博客
01-13 797
原来用过，没有太在意，最近又用到。记下方便以后用。 &lt;div style='border:0px;padding:3px; PADDING:0px; width:200px; height:480px; LINE-HEIGHT: 20px; OVERFLOW: auto; '&gt;&lt;/div&gt;   以下是更多滚动条样式：   ...
vue轮播图竖向无缝滚动
08-17
要实现Vue中的竖向无缝滚动轮播图，你可以使用一些Vue插件或自定义组件来实现。下面是一个简单的示例，演示了如何使用Vue和vue-awesome-swiper插件来实现这个效果： 首先，确保你已经安装了vue-awesome-swiper插件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值