今天闲着没事,看到隔壁老张在用jq写文字向上的轮播效果,遂想到用css3的动画也可以做到,然后就随手写了点,向上的过渡距离不是很精确,有需要的自行修改,欢迎提出意见。
css部分
div{
width:350px;
height: 150px;
border: 1px solid;
overflow: hidden;
}
.ul li{
width: 300px;
height: 38px;
}
.ul {
height:220px;
position:relative;
transition: all 2s;
animation:aaa 15s infinite 2s running;
}
@keyframes aaa {
0% {
transform:translatey(0px);
}
15% {
transform:translatey(-38px);
}
25% {
transform:translateY(-72px);
}
50% {
transform:translateY(-120px);
}
75% {
transform:translateY(-220px);
}
100% {
transform:translateY(-400px);
}
}
.ul:hover {
animation-play-state:paused;
cursor:pointer;
}
HTML部分:
- 11111111111111111111111111111
- 22222222222222222222222222222
- 33333333333333333333333333333
- 44444444444444444444444444444
- 555555555555555555555555555555
- 666666666666666666666666666666
- 11111111111111111111111111111
- 22222222222222222222222222222
- 33333333333333333333333333333
- 44444444444444444444444444444
- 555555555555555555555555555555
- 666666666666666666666666666666
- 11111111111111111111111111111
- 22222222222222222222222222222
- 33333333333333333333333333333
- 44444444444444444444444444444
- 555555555555555555555555555555
- 666666666666666666666666666666
- 11111111111111111111111111111
- 22222222222222222222222222222
- 33333333333333333333333333333
- 44444444444444444444444444444
- 555555555555555555555555555555
- 666666666666666666666666666666