复古HTML，让我们来制作跑马灯吧😃
我最早学会的HTML技能之一就是用跑马灯效果让文字在屏幕上水平移动。能够用一个简单的标签在页面上创建广告，吸引用户注意，真是太酷了。当然，后来人们滥用了这种效果，就像90年代的宽松牛仔裤一样，在新设计中逐渐过时了。
历史
这个 HTML<marquee>元素用于插入一个可滚动的文本区域。你可以使用它的属性来控制文本到达区域边缘时的行为。当然，我用过去式并不意味着它不再受支持。它虽然已经过时一段时间了，但大多数浏览器仍然支持它。
你可以亲眼见证它的实际效果：
CSS跑马灯
所以我想只用一些方法来模拟这些效果CSS。我们将使用CSS动画并进行一些调整overflow来模拟文本延伸到边缘的效果。
滚动文本
所以，我们来调整一下translateX()，指定动画开始和结束时的内容位置。我们将利用这个参数来保持文本在动画开始和结束时的移动。
动画部分我们将使用持续时间为 10 秒的无限线性动画。
.marquee {
height: 50px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
color: turquoise;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform:translateX(100%);
animation: cssmarquee 10s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
HTML 代码很简单：
<div class="marquee">
<span>Scrolling Text </span>
</div>
滑入
现在我们把文本滑入文本，并固定开头的位置。我们将使用ease-out一个200%值来表示translateX起始位置，并使用一个值0%来表示结束位置。
.marquee {
height: 50px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
color: green;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: left;
animation: cssmarquee 10s ease-out;
}
@keyframes cssmarquee {
0% {
transform: translateX(200%);
}
100% {
transform: translateX(0%);
}
}
为了节省打字时间，我就不再重复HTML代码了😁。代码和上面一模一样。
从左到右
现在我们来把文本从左向右移动。同样，我们translateX第一个例子将使用线性无限动画，但数值要反转。
唯一的区别在于 transform 属性的初始值。
.marquee {
height: 50px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
position: absolute;
width: 100%;
height: 100%;
color: green;
margin: 0;
line-height: 50px;
text-align: center;
/* Starting position */
transform: translateX(-100%);
animation: cssmarquee 20s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
垂直滚动
现在你应该能猜到我们将使用什么了。translateX我们将使用，而不是translateY。
.marquee {
height: 100px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
position: absolute;
color: green;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform: translateY(-100%);
animation: cssmarquee 5s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
}
弹跳文本
现在假设当时人们想要一些花哨的效果。这次我们想让文字弹跳起来😃。我们需要改进alternate动画并减少延迟。我们还要添加一些trnslateX设置，防止内容弹跳到页面边缘之外。
.marquee {
height: 200px;
overflow: hidden;
position: relative;
}
.marquee span {
font-size: 2em;
position: absolute;
color: turquoise;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform: translateY(70%);
animation: cssmarquee 1s linear infinite alternate;
}
@keyframes cssmarquee {
0% {
transform: translateY(70%);
}
100% {
transform: translateY(0%);
}
}
打字效果
这次我们想在动画中加入一些步进效果，来营造打字机的效果。我们将使用 `\sigma`from和to`\sigma` 作为关键帧。然后使用 `\sigma`steps和step-end`\sigma` 来模拟文本和闪烁光标的效果。
body {
font-family: 'Special Elite', cursive;
background: #efefef;
padding-top: 5em;
display: flex;
justify-content: center;
}
.typewriter h1 {
overflow: hidden;
border-right: .15em solid green;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
type 4s steps(50, end),
blink-cursor .7s step-end infinite;
}
@keyframes type {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-cursor {
from, to { border-color: transparent }
50% { border-color: green; }
}
别忘了Special Elite从谷歌字体添加字体。
<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap" rel="stylesheet">
</head>
概括
就这样吧。你可以回去继续做你正在做的重要工作了。对我来说，放松一下总是好的，希望这对你也有好处😊。下次见👋🏼。
文章来源：https://dev.to/yashints/retro-html-let-s-create-marquees-4n31