当前位置:首页 > 网站应用 > 正文内容

css3动画实现滚动字,类似航班信息,超出滚动,不超出不滚动

cjw1231年前 (2023-11-01)网站应用1890

文字走马灯,手机的弹幕等等。

js可以动态的计算宽度,但js做动画需要定时器,很不方便。

其实就是里外容器对向滚动,滚动的值为里外容器宽度的差值,如果里容器与外容器等宽,那么差值就为0,视觉上是没有滚动的,就像第一条数据;如果里容器宽度比外容器宽,里容器向左滚动的距离比外容器向右滚动的距离大,就会形成滚动效果,并在里容器translateX为-100%外容器translate为100%时停下,视觉效果就是滚动到文字的最右侧。

里容器的float: left;是为了形成块级格式化上下文,避免文字撑不开容器。

<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>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=24

标签: html
分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

css中鼠标样式大全

<p>请把鼠标移动文字上,看看效果吧</p> <div style="cursor: pointer;">手形</div>  <div style="cursor:&nbs...

彩色流转文字代码

<style>#nr { font-size: 15px; margin:  0; background:  -webkit-linear-gradient(left,#ffffff,#ff0000 6.2...

google谷歌翻译镜像网站

查找外文资料对于外语不好的那必须要借助翻译工具,各家翻译工具各有不同,想要使用google谷歌翻译,奈何无法访问,那么如何在国内使用谷歌翻译?google谷歌翻译镜像网站有哪些?https://translate.yunkuerp.cn/https://translate.renwole.com/h...

css3+html5特效制作闪烁的文字

<head><charset="utf-8" /> <style> @-webkit-keyframes flash {     0%{   &n...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。