纯css3无缝上下文字滚动效果，无缝滚动 

<!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>
	<h1>用CSS3实现无限循环的无缝滚动</h1>
    <p>返回文章： <a href="http://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html">用CSS3实现无限循环的无缝滚动</a></p>
    
	<div class="demo-list">
	    <div class="cc rowup">
	        <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>
	        <div class="item">2- 3123233</div>
	        <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>
	        <div class="item">4- ggrgerg</div>
	        <div class="item">5- fvdgdv</div>
	        <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</div>
	        <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>
	        <div class="item">8- 德国网红致信默克尔</div>
	        <div class="item">9- 国资委原</div>
	        <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>
	        <div class="item">2- 3123233</div>
	        <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>
	        <div class="item">4- ggrgerg</div>
	        <div class="item">5- fvdgdv</div>
	        <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</div>
	        <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>
	        <div class="item">8- 德国网红致信默克尔</div>
	        <div class="item">9- 国资委原</div>
	    </div>
	</div>

</body></html>

 演示效果

posted @ 2019-01-24 12:32  Shimily  阅读(15583)  评论(0)    收藏  举报