垂直滚动：
move0.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 50px;
position: relative;
box-shadow: 0 0 5px #ccc;
overflow: hidden;
}
.box .li {
width: 100%;
height: 50px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
.li_box {
animation:li_move 5s linear 1s infinite;
}
@keyframes li_move {
0% {
transform: translateY(0%);
}
100% {
/* 此处50px 与上面设置的高度相对应 */
transform: translateY(calc((100% - 50px)*-1));
}
}
</style>
</head>
<body>
<div class="box">
<div class="li_box">
<div class="li">1</div>
<div class="li">2</div>
<div class="li">3</div>
<div class="li">4</div>
<!-- 此处这样写是为了增加流畅性，和无缝轮播图效果差不多 -->
<div class="li">1</div>
</div>
</div>
</body>
</html>
水平滚动：
move1.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,
html {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 50px;
position: relative;
box-shadow: 0 0 5px #ccc;
overflow: hidden;
}
.box .li {
width: 100%;
height: 50px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
.li_box {
display: flex;
/* 5 为li 的个数 */
/* 项目中可直接在标签上定义 :style="`width:${300*5}px`" */
width: calc(300px * 5);
animation:li_move 5s linear 1s infinite;
}
@keyframes li_move {
0% {
transform: translateX(0%);
}
100% {
/* 此处300px 与上面设置的宽度相对应 */
transform: translateX(calc((100% - 300px)*-1));
}
}
</style>
</head>
<body>
<div class="box">
<div class="li_box">
<div class="li">1</div>
<div class="li">2</div>
<div class="li">3</div>
<div class="li">4</div>
<div class="li">1</div>
</div>
</div>
</body>
</html>
网友评论