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>

代碼改變了我們，也改變了世界