CSS3实现无限向上滚动

2021-03-10  

<!DOCTYPE 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, -200px, 0);
                transform: translate3d(0, -200px, 0);
            }
        }
        @keyframes rowup {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -200px, 0);
                transform: translate3d(0, -200px, 0);
            }
        }
        .demo{
            width: 300px;
            border: 1px solid #999;
            margin: 20px auto;
            position: relative;
            height: 200px;
            overflow: hidden;
        }
 
        .demo .rowup{
            -webkit-animation: 10s rowup linear infinite normal;
            animation: 10s rowup linear infinite normal;
            position: relative;
        }
    </style>
</head>
<body>
    <center><h1>CSS3无限滚动向上</h1></center>
    <div class="demo">
        <div class="rowup">
            <div class="item">1- 111111</div>
            <div class="item">2- 222222</div>
            <div class="item">3- 333333</div>
            <div class="item">4- 444444</div>
			<div class="item">5- 555555</div>
			<div class="item">6- 666666</div>
			<div class="item">7- 777777</div>
			<div class="item">8- 888888</div>
			<div class="item">9- 999999</div>
			<div class="item">10- 00000</div>
			<div class="item">1- 111111</div>
            <div class="item">2- 222222</div>
            <div class="item">3- 333333</div>
            <div class="item">4- 444444</div>
			<div class="item">5- 555555</div>
			<div class="item">6- 666666</div>
			<div class="item">7- 777777</div>
			<div class="item">8- 888888</div>
			<div class="item">9- 999999</div>
			<div class="item">10- 00000</div>
        </div>
    </div> 
</body>
</html>

 

 

ConstXiong 备案号:苏ICP备16009629号-3