<分区>
我有这个跨度元素:<span id='title'>SOME TEXT HERE</span> , 使用这个 CSS:
color: #fff;
line-height: 22px;
font-size: 16px;
float: left;
max-width: 320px;
overflow: hidden;
white-space: nowrap;
我正试图在文本上实现这种“消失”效果。我玩过 :after但没有成功...
标签 javascript html css text
<分区>
我有这个跨度元素:<span id='title'>SOME TEXT HERE</span> , 使用这个 CSS:
color: #fff;
line-height: 22px;
font-size: 16px;
float: left;
max-width: 320px;
overflow: hidden;
white-space: nowrap;
我正试图在文本上实现这种“消失”效果。我玩过 :after但没有成功...
最佳答案
像这样的东西应该可以解决问题。
.fade-out {
position: relative;
max-height: 350px;
}
.fade-out:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}<span class='fade-out'>Spiderman Will Appear In Another MCU Movie Later Next Year</span>希望对您有所帮助，
关于javascript - 如何在跨度上获得这个 "text disappearing"效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58252385/
相关文章：
Javascript .charAt(0) 给出意想不到的结果
html - <a> 标签内的复选框输入只会更改检查状态而不会打开链接
css - Bootstrap 3 : Centering and fixing glyphicon labels
android - Bootstrap Modal 无法在 Android Webview 上正确显示
javascript - 如何人性化angularjs中的持续时间？
javascript - 如何覆盖 anchor 元素的 href 目标并删除我的点击进入目标 javascript 中的其他错误？