HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/动画.css"/>
</head>
<body>
<div id="wrapper">
<ul class="dataList">
<li>1.all thing in their being are good for something.</li>
<li>2.the good seaman is known in bad weather.</li>
<li>3.cease to struggle and you cease to live.</li>
<li>4.man struggles upward,water flows downwards.</li>
<li>5.wise men are silent,fools talk.</li>
<li>6.one who keeps abreast of the times remains young.</li>
<li>7.he that endures is not overcome.</li>
<li>8.take the whole into consideration,but do the job bit by bit.</li>
<li>9.the world belongs to the enthusiast who keeps cool.</li>
<li>1.all thing in their being are good for something.</li>
<li>2.the good seaman is known in bad weather.</li>
<li>3.cease to struggle and you cease to live.</li>
<li>4.man struggles upward,water flows downwards.</li>
<li>5.wise men are silent,fools talk.</li>
<li>6.one who keeps abreast of the times remains young.</li>
<li>7.he that endures is not overcome.</li>
<li>8.take the whole into consideration,but do the job bit by bit.</li>
<li>9.the world belongs to the enthusiast who keeps cool.</li>
</ul>
</div>
</body>
</html>
CSS部分：
@keyframes scroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -307px, 0);
}
}
#wrapper{
width: 400px;
border: 1px solid #eee;
background: bisque;
margin: 20px auto;
position: relative;
height: 200px;
overflow: hidden;
}
#wrapper .dataList{
animation: 5s scroll linear infinite normal;
position: relative;
}
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
