HTML+CSS实现变色跑马灯效果代码示例 - 字体颜色动画
<p>{/'title/':/'HTML+CSS实现变色跑马灯效果代码示例 - 字体颜色动画/',/'description/':/'使用HTML和CSS编写一个简单的跑马灯效果，并通过动画实现字体颜色不断变化。示例代码演示如何创建跑马灯容器、设置文本内容以及定义字体颜色动画。/',/'keywords/':/'跑马灯, 字体变色, 动画, HTML, CSS, 代码示例, marquee/',/'content/':/'<!DOCTYPE html>/n<html>/n<head>/n<style>/n /* 定义跑马灯容器 <em>//n .marquee-container {/n width: 100%;/n height: 50px;/n overflow: hidden;/n position: relative;/n }/n/n /</em> 定义跑马灯内容 <em>//n .marquee-content {/n display: inline-block;/n white-space: nowrap;/n position: absolute;/n animation: marquee 10s infinite;/n }/n/n /</em> 定义字体动画 *//n @keyframes marquee {/n 0% { color: red; }/n 25% { color: blue; }/n 50% { color: green; }/n 75% { color: orange; }/n 100% { color: purple; }/n }/n</style>/n</head>/n<body>/n <div class=/'marquee-container/'>/n <div class=/'marquee-content/'>/n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec sem vel nisl aliquam fringilla./n </div>/n </div>/n</body>/n</html>/n/n在上述代码中，我们创建了一个跑马灯容器 <code>.marquee-container</code>，它具有固定的宽度和高度，并设置了 <code>overflow: hidden</code> 来隐藏超出容器的内容。然后我们创建了一个 <code>.marquee-content</code> 容器，其中的文本将作为跑马灯内容显示。我们使用 <code>white-space: nowrap</code> 来确保文本在一行内显示，并将其设置为 <code>position: absolute</code> 以便在跑马灯容器内进行移动。最后，我们定义了一个名为 <code>marquee</code> 的动画，通过 <code>animation</code> 属性将其应用到 <code>.marquee-content</code> 上。在动画中，我们使用 <code>@keyframes</code> 来定义不同时间点上的颜色变化。/n/n此代码将在页面上创建一个跑马灯效果，字体会不断变色。你可以根据需要调整容器的宽度、高度和文本内容来适应你的实际需求。/</p>
原文地址: http://www.cveoy.top/t/topic/qpl3 著作权归作者所有。请勿转载和采集!