css,js实现跑马灯效果

最新推荐文章于 2024-07-13 16:47:12 发布

前端前端

最新推荐文章于 2024-07-13 16:47:12 发布

阅读量2.7k

点赞数

分类专栏： css+js

本文链接：https://blog.csdn.net/qq_36736346/article/details/80385007

版权

本文详细介绍了如何使用CSS、JavaScript以及jQuery来创建跑马灯效果，包括二维和三维的应用，提供了丰富的实现方法。

摘要由CSDN通过智能技术生成

一、二维跑马灯

1.css实现跑马灯效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			#wrapper {
				position: relative;
				overflow: hidden;
				width: 25%;
				height: 100px;
				font-size: 20px;
				border: solid 1px #000000;
			}

			#horse {
				position: absolute;
				width: 100%;
				-webkit-animation: horse 3s linear 0s infinite;
			}

			@-webkit-keyframes horse {
				0% {
					left: 0%;
					top: 0px;
					background-color: lavenderblush;
				}

				47% {
					left: 105%;
					top: 0px;
				}

				48% {
					left: 105%;
					top: 100px;
				}

				49% {
					left: -105%;
					top: 100px;
				}

				50% {
					left: -100%;
					top: 0px;
					background-color: lightpink;
				}

				100% {
					left: 0%;
					top: 0px;
					background-color: #FFB6C1;
				}
			}
		</style>
		<script> </script>
	</head>
	<body>
		<div id="wrapper">
			<div id="horse"> <span> CSS3 </span> <span> 实现的跑马灯效果 </div> </span>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta char

最低0.47元/天解锁文章

前端前端

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css,js实现跑马灯效果

一、二维跑马灯1.css实现跑马灯效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> body { display: flex; flex-direction...
复制链接

扫一扫

专栏目录