css静态无间接滚动/动态数据可换另一种方法

<!DOCTYPE html>
<!-- saved from url=(0064)https://www.xiabingbao.com/demo/css3-infinite-scroll/simple.html -->
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>CSS3无限滚动</title>
		<style type="text/css">
			@-webkit-keyframes rowup {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}

				100% {
					-webkit-transform: translate3d(0, -307px, 0);
					transform: translate3d(0, -307px, 0);
				}
			}

			@keyframes rowup {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}

				100% {
					-webkit-transform: translate3d(0, -307px, 0);
					transform: translate3d(0, -307px, 0);
				}
			}

			.demo-list {
				width: 300px;
				border: 1px solid #999;
				margin: 20px auto;
				position: relative;
				height: 200px;
				overflow: hidden;
			}

			.demo-list .rowup {
				-webkit-animation: 10s rowup linear infinite normal;
				animation: 10s rowup linear infinite normal;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="demo-list">
			<div class="cc rowup">

			</div>
		</div>

	</body>
</html>

posted @ 2021-12-15 13:41 文采呱呱阅读(92) 评论(0) 收藏举报

刷新页面返回顶部

文采呱呱

三更灯火五更鸡，正是少年读书时

css静态无间接滚动/动态数据可换另一种方法

公告