css3动画实现滚动字，超出滚动，不超出不滚动

已于 2023-10-09 14:26:33 修改
阅读量785 收藏 2
点赞数
文章标签： css3 css 前端
于 2023-10-09 14:25:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43506976/article/details/133701382
版权 
<head>
<meta charset="utf-8">
<style>
.item{
height:100px;
width:200px;
background:pink;
}
.marquee {
overflow: hidden;
}

.marquee .marquee-wrap {
width: 100%;
animation: marquee-wrap 4s infinite linear;
}

.marquee .marquee-content {
float: left;
white-space: nowrap;
min-width: 100%;
animation: marquee-content 4s infinite linear;
}

@keyframes marquee-wrap{
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(100%);
  }
}

@keyframes marquee-content{
  0%,
  30% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(-100%);
  }
}
</style>
</head><body>
<ul>
<li class="item marquee">
<div class="marquee-wrap">
  <div class="marquee-content">
    这个是非超长数据不动。
  </div>
</div>
</li>
<li class="item marquee">
<div class="marquee-wrap">
  <div class="marquee-content">
    这是头，这个是超长数据，我超长了哦，我超长了哦，我超长了哦。
  </div>
</div>
</li>
</ul>
</body>

小素_sulee
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
文字溢出滚动展示
10-25
文字溢出滚动展示，循环展示和一个展示的demo.
CSS 文字超出隐藏，显示省略号，文字垂直显示 内容超出容器时显示滚动条
小肉包的博客
11-23 1043
CSS 文字超出隐藏，显示省略号 效果图： overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
CSS实现文字上下滚动、间歇滚动和无限滚动
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-19 934
主要记录了用CSS实现文字上下滚动、间歇滚动和无限滚动效果
CSS 文字超出显示滚动条
努力搬砖的小码
04-30 710
CSS 文字超出显示滚动条
使用CSS3动画实现文字滚动
qq_33770684的博客
08-08 567
使用CSS3动画实现文字滚动
微信小程序组件 marquee实例详解
01-03
微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的，可以实现跑马灯效果，但小程序没有，所以要实现。这里考虑使用css3的animation实现。 html的marquee是这样使用的。 <marquee direction=left behavior=scroll scrollamount=1 scrolldelay=0 loop=-1 width=200 height=50 bgcolor=#0099FF hspace=10 vspace=10> hello world </marquee>
vue项目 css实现所有文字菜单在一行超出屏幕滚动效果
wx479的博客
12-10 1622
一行菜单显示
CSS设置文字超出则显示.....
qq_41353397的博客
08-23 5106
css样式中添加以下样式： width: 300px;//宽度一定要有，具体根据自己需求 overflow: hidden;/*超出部分隐藏*/ white-space: nowrap;/*不换行*/ text-overflow:ellipsis;/*超出部分文字以...显示*/
css 超出滑动使用 CSS 实现超出滑动
Andyfu2019的博客
10-11 2562
CSS 超出滑动是指当内容超出容器的范围时，可以使用滑动条来查看所有内容。下面是一个示例代码：上面的代码中，我们将容器的宽度和高度设置为 300px 和 200px，并将 设置为 auto，这样当内容超出容器的范围时，就会出现滑动条。上面的代码中，我们将容器的宽度和高度设置为 300px 和 200px，并将 overflow 设置为 auto，这样当内容超出容器的范围时，就会出现滑动条。CSS 超出滑动是指当内容超出容器的范围时，可以使用滑动条来查看所有内容。
纯 CSS 实现 超长内容滚动播放。
~~~
02-24 958
【代码】纯 CSS 实现 超长内容滚动播放。
css3文字上下滚动切换特效
04-06
"css3文字上下滚动切换特效"是利用CSS3的特性来实现的一种新颖的文字展示方式，它能吸引用户的注意力，提升网页的互动性和吸引力。这种特效尤其适用于新闻更新、滚动公告或者产品介绍等需要连续展示多条信息的场景。...
通过css动画实现一个表格滚动轮播效果
12-28
css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下 序号 姓名 年龄 性别 专业 </ul>
css3广告文字向下滚动切换代码
06-11
本篇文章将深入探讨如何利用CSS3实现一款简单的广告文字向下滚动切换效果，并自定义文字样式和背景颜色。 首先，我们要了解CSS3中的关键帧动画（@keyframes）是实现这一效果的核心。关键帧动画允许我们定义动画在...
用CSS3实现无限循环的无缝滚动的示例代码
09-24
总的来说，CSS3的动画功能为实现无限循环无缝滚动提供了简洁高效的方法，减少了对JavaScript的依赖，同时也让网页设计更加灵活和动态。理解并熟练运用这些技术，可以让你的网页设计更加生动和吸引人。
js不间断滚动的简单实现
10-22
当动画完成时，通过`css`方法将`marginTop`恢复为0，并使用`find`和`appendTo`方法将第一行移动到列表的末尾，实现无缝滚动。 ```javascript function AutoScroll(obj) { $(obj).find("ul:first").animate({ ...
html内容超出不自动滚动,css设置div滚动条内容不超过就不显示
weixin_34489345的博客
05-31 2594
css设置div滚动条内容不超过就不显示实现内容不超出就不显示滚动条的效果，可以设置div的css样式为overflow:auto，当overflow取值为auto时，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，否则不显示滚动条。示例：Document.div1{width: 100px;height: 100px;overflow-y: auto;border: 1px solid ...
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？
热门推荐
qq_38402659的博客
02-26 1万+
div内容宽度超出边界后怎样设置为左右滑动，而且不显示滚动条？ 纯手写 滚动条隐藏掉就行了 CSS: *{ margin:0px;padding:0px; } .wrap{ overflow: hidden; height: 40px; } .cont{ height: 60px; ...
CSS动画之——跑马灯的无缝循环
风华流沙君莫笑的博客
07-07 2066
在写官网的过程中，有一个需求是想要是先人物卡片横向无缝循环的功能。但是直接用跑马灯的时候发现他的效果是要等所有的盒子都从左边消失后才会从后面出来第一个。怎么调都不合适 给我整疑惑了， 后来百度下说是可以两个相同的盒子 一前一后，看到这豁然开朗，但是后来忘了是哪篇帖子了 这里记录一下。首先我是用v-for循环定义了四个盒子 再复制一份 这样我们一共就有八个盒子。盒子上去 这样会导致 只有其中一个盒子暂停 另一个盒子不会暂停。设置其中的样式 这里还做了一个鼠标移入实现动画暂停以及放大的效果。
修改滚动条的样式
cherry_zhang18的博客
08-12 485
//滚动条css ::-webkit-scrollbar { /*滚动条整体样式*/ width: 2px; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px; } ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2); background: #007cff; } ::-webkit-sc.
css3 实现表格循环滚动
02-06
可以使用 CSS3 的 `animation` 和 `transform` 属性来实现表格的循环滚动效果。 首先，需要为表格的容器元素添加 `overflow: hidden` 属性，使超出容器的部分隐藏。然后，为表格设置一个高度，并将其位置设为绝对定位，这样才能对表格进行动画。接下来，使用 `animation` 属性来定义动画的名称、时长、循环次数等属性。最后，使用 `transform: translateY()` 来控制表格在垂直方向上的移动。 示例代码如下： ```css .table-container { overflow: hidden; position: relative; height: 200px; } .table { position: absolute; animation: scroll-table 10s linear infinite; } @keyframes scroll-table { from { transform: translateY(0); } to { transform: translateY(-100%); } } ``` 上述代码中，`.table-container` 是表格的容器元素，`.table` 是表格本身。动画 `scroll-table` 持续时间为 10 秒，每次循环执行一次，从初始位置移动到距离容器顶部 100% 的位置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值