问答一下,轻松解决,电脑应用解决专家!
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win10/Win11
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascriptLinux系统
PHP教程CSS教程XML教程

使用纯CSS实现文字走马灯效果

更新时间:2021-06-06 14:15 作者:Gols点击:

原本是为了在自己做的一个迷你音乐播放器上,加入歌名或作者名太长自动滚动的效果,想尽可能的用CSS来实现走马灯,网上稍微找了下没有理想的效果,于是自己整了一个,先上效果图和实例地址

实例地址:http://www.wd1x.com/css/canvas10.html

并且我认为使用的代码也十分简洁

	<style>
		* {
			margin:0;padding: 0;
			font-size: 50px;
			color:#fff;
		}
		.block {
			width: 500px;
			background-color: #65b4ae;
			white-space: nowrap;
			overflow: hidden;
		}
		.words {
			position: relative;
			width: fit-content;
			animation:move 4s linear infinite;
                        padding-left:50px;
		}
		.words::after{
			position: absolute; 
			right:-100%;
			content:attr(text);
		}

		@keyframes move {
			0% {
				transform: translateX(0);
			}
			100% {
				transform: translateX(-100%);
			}
		}
	</style>
        <body>
		<div class="block">
			<p class="words" text="HOW YOU LIKE THAT">
				HOW YOU LIKE THAT
			</p>
		</div>
        </body>

首先 p标签的宽度要用fit-content属性,用来定义宽度为文本长度,否则translateX的就不是文本长度而是原本p元素的长度。

伪元素after用来成为 走马灯的循环文字,内容是用attr函数来获取文本。并且是用绝对定位,这样在使用动画的时候,translateX(-100%) ,只会移动到第一段文本结尾,这段文字不会被计算进去。

这样一个简单的纯CSS走马灯就实现了。

然鹅有一个小小的问题,就是走马灯每圈时间都是固定的,速度会随着文本的长度变化而变化,我希望每个不同长度的文本都是以恒定速度来走的。

如果是用vue来写的话,p标签可以稍微改动一下就能实现以恒定速度走。

<p 
class="words"
ref="words"
:text="content"
:style="{animationDuration:words && words.offsetWidth / 150 + 's'}"
 >
     {{content}}
</p>

这样一个简单的纯(伪)CSS走马灯就实现了。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容