在现代网页设计中，跑马灯效果是一种常见的展示方式，通常用于展示新闻、公告、广告等信息。虽然传统的做法通常依赖JavaScript，但我们也可以通过纯CSS来实现一个简单的横向跑马灯效果，并且使其具有无缝滚动和悬停停止的特性。
CSS 跑马灯的基本思路
我们将创建一个容器，然后在其中放置多个内容项，使它们在一定的时间间隔内向左移动。当鼠标悬停在容器上时，动画将暂停。以下是实现这一效果的具体步骤和代码示例。
HTML 结构
首先，我们需要一个简单的HTML结构。我们将创建一个包含多个内容项的容器。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS横向跑马灯</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="marquee">
<div class="marquee-content">
<div class="item">欢迎访问我们的网站</div>
<div class="item">限时优惠！快来抢购</div>
<div class="item">新产品上线，立即查看</div>
<div class="item">联系我们获取更多信息</div>
<div class="item">感谢您的支持与关注</div>
</div>
</div>
</body>
</html>
CSS 样式
接下来，我们来定义所需的CSS样式。我们需要设置容器的大小、背景、以及放置在其中的内容项的排列方式及动画。
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
.marquee {
overflow: hidden; /* 隐藏溢出内容 */
white-space: nowrap; /* 使内容在同一行 */
background: #fff; /* 背景色 */
border: 1px solid #ccc; /* 边框 */
padding: 10px 0; /* 上下内边距 */
position: relative;
}
.marquee-content {
display: inline-block; /* 内容以块状元素展示 */
animation: marquee 10s linear infinite; /* 设置动画 */
}
.item {
display: inline-block; /* 每一项内容都是一个块 */
padding: 0 50px; /* 每项内容左右内边距 */
}
/* 定义跑马灯动画 */
@keyframes marquee {
0% { transform: translateX(100%); } /* 从右侧开始 */
100% { transform: translateX(-100%); } /* 向左结束 */
}
/* 悬停暂停动画 */
.marquee:hover .marquee-content {
animation-play-state: paused; /* 设置为暂停 */
}
实现原理
-
容器设置：
marquee容器使用overflow: hidden;来隐藏超出其边界的内容，确保我们只看到视口中的部分。white-space: nowrap;保证所有内容不换行，保持在同一行内。 -
内容动画：
marquee-content是一个行内块级元素，使用animation属性添加无缝滚动效果。10s设置了动画持续时间，linear表示动画匀速，infinite使其无限循环。 -
动画关键帧：在
@keyframes中定义了动画的起始位置（在右侧）和结束位置（在左侧），通过transform: translateX()实现位移。 -
悬停效果：在
marquee:hover中，通过暂停动画的播放状态，使得用户在观看内容时不会错过信息。
总结
通过以上代码，我们实现了一个简单的横向跑马灯效果。虽然这个实现是基于CSS的，但依然保留了浏览器的原生性能，避免了JavaScript的灾难性影响。这种方式简单且容易维护，适合轻量级的信息展示。可以根据实际需求调整动画速度、内容和样式，进一步丰富用户体验。希望这个示例对您有帮助，可以在您的项目中灵活运用！
