横向跑马灯效果

最新推荐文章于 2024-07-25 14:02:05 发布

是文静的

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量179

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44091061/article/details/131108483

版权

<div class="marquee">
		<p>
			跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯
		</p>
</div>```

```javascript
.marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 10px;
	p {
		display: inline-block;
		animation: marquee 40s linear infinite;
	}
}

@keyframes marquee {
	0% {
		transform: translateX(0);
	}
	10% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}