CSS实现文字跑马灯效果

在完成一个任务的时候，要求在表格中固定宽度的其中一个item文字过长需要滚动显示，然后经过多次效果的尝试，实现代码如下所示：

它需要一个外层包围盒，设置定宽、文字不换行以及超过隐藏
子元素为一个p标签，设置width: fit-content;使盒子背景宽度随文字宽度而进行自适应，并设置一个自定义属性text(可自定义)
给p标签添加伪元素::after ，设置content: attr(text);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin:0;padding: 0;}.container {/* 最外层盒子，需要三个属性：定宽、文字不换行、超过隐藏 */width: 500px;white-space: nowrap;overflow: hidden;font-size: 20px;color: #65b4ae;}.container_words {position: relative;/* 盒子背景宽度将随文字宽度而进行自适应 */width: fit-content;/* 添加动画 */animation: move 4s linear infinite;/* 让前面的几个文字有一个初始的距离，达到更好的呈现效果 */padding-left: 20px;}.container_words::after {position: absolute; right: -100%;content: attr(text);}@keyframes move {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}</style>
</head>
<body><div class="container"><p class="container_words" text="文字文字文字文字文字">文字文字文字文字文字</p></div>
</body>
</html>

效果如下：

那么，我们试着将其封装，以便在多处使用：

首先，我们需要计算这段文字的宽度。通过扩展String原型方法getWidth

/*** 获取文本px宽度* @param font{String}: 字体样式* @return {Number} 文本宽度**/
String.prototype.getWidth = function (font: string) {// re-use canvas object for better performanceconst canvas =String.prototype.getWidth.canvas ||(String.prototype.getWidth.canvas = document.createElement('canvas')),context = canvas.getContext('2d');font && (context.font = font);const metrics = context.measureText(this);return metrics.width;
};

其次，我们设想哪些参数是需要可配置的。

属性	是否必须	类型	默认值	描述
width	是	Number	-	元素DOM的最大宽度，超过此宽度将滚动
text	是	String	-	文本内容
font	是	String	-	这个是用来计算传入的文本的真实宽度，对比最大宽度看是否需要滚动。示例：`21px SourceHanSansCN-Normal`
classNames	否	String	空	元素class类名，需要设置其他的样式
speed	否	Number	20	滚动速度，单位s
paddingLeft	否	Number	20	paddingLeft，需要滚动的元素的初始paddingLeft，为了防止初次滚动而看不见前面几个字

那么，封装的组件完整代码如下：

<template><divv-if="text.getWidth(font) > width":class="['horse', classNames]":style="{width: width + 'px','--speed': speed,}"><p:text="text"class="horse_words":style="{paddingLeft: paddingLeft + 'px',}">{{ text }}</p></div><divv-else:style="{width: width + 'px',}":class="classNames">{{ text }}</div>
</template><script lang="ts">
export default {name: 'HorseRaceLamp',props: {// 元素DOM的最大宽度，超过此宽度将滚动width: {type: Number,required: true,},// 文本内容text: {type: String,required: true,},// 文本字体、大小等 示例：'21px SourceHanSansCN-Normal'font: {type: String,required: true,},// 元素class类名，需要设置其他的样式classNames: {type: String,default: '',},// 滚动速度，单位sspeed: {type: Number,default: 20,},// paddingLeft，需要滚动的元素的初始paddingLeft，为了防止初次滚动而看不见前面几个字paddingLeft: {type: Number,default: 20,},},
};
</script><style lang="scss" scoped>
.horse {white-space: nowrap;overflow: hidden;&_words {position: relative;width: fit-content;animation: move calc(var(--speed) * 1s) linear infinite;&::after {position: absolute;right: -100%;content: attr(text);}}
}
@keyframes move {0% {transform: translateX(0);}100% {transform: translateX(-100%);}
}
</style>

使用方式：

<HorseRaceLampfont="20px SourceHanSansCN-Normal":width="115"text="今日累计收费金额今日累计收费金额今日累计收费金额"
/>

CSS实现文字跑马灯效果相关推荐

c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
python中的字符串详解（附实现文字跑马灯效果）
python中的字符串详解 1.什么是字符串相信大家对字符串应该是再熟悉不过了吧,因为日常生活中的一句话,或是路边的一则广告,其实它都相当于一个字符串,而顾名思义,字符串也就是一串串的由零个或多 ...
微信小程序教程：文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
微信小程序文字跑马灯效果
1.样式 /*首页跑马灯效果开始*/ .container_marquee {display: flex;flex-direction: column;justify-content: space-b ...
html 文字跑马灯效果,CSS3 长文字跑马灯效果
raw js + css3 transition 跑马灯测试.跑马灯测试.跑马灯测试. @keyframes kf-marque-animation { 0% { transform: transla ...
android 字体跑马灯,Android中使用TextView实现文字跑马灯效果
通常情况下我们想实现文字的走马灯效果需要在xml文件中这样设置 android:layout_width="wrap_content" android:layout_height= ...
微信小程序：公告字幕滚动播放（文字跑马灯效果）
一.需求公告文字仅限200字公告内容仅限一行文字显示公告内容持续滚动二.解决思路使用动画API(Animation.translate),完成移动动画使用定时器API(setInterva ...
VUE之文字跑马灯效果
1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...

CSS实现文字跑马灯效果

CSS实现文字跑马灯效果

CSS实现文字跑马灯效果相关推荐

最新文章

热门文章