CSS 类似中奖名单的上下滚动特效
Sonder
2021-01-06
7058字
18分钟
浏览 (3.9k)
废话少说直接上代码，上效果！
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.lottery-winner {
background: #f7f7f7 center / cover no-repeat;
border-radius: 12px;
margin-top: 10px;
border: 1px solid rgba(151,151,151,0.15);
box-sizing: border-box;
}
.lottery-winner-hasbg .lottery-winner-title {
background: transparent;
}
.lottery-winner-title {
position: relative;
box-sizing: border-box;
border-radius: 12px 12px 0 0;
height: 50px;
line-height: 50px;
font-size: 18px;
padding-left: 18px;
color: #212121;
background: #fff;
font-weight: bold;
border-bottom: 1px solid rgba(151,151,151,0.15);
}
.lottery-winner-title>a {
font-size: 17px;
padding-right: 8px;
color: #999;
position: absolute;
font-weight: normal;
top: 0;
right: 30px;
cursor: pointer;
transition: color .3s ease-in-out;
}
.lottery-winner-title>a:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
right: 0;
top: 50%;
transform: rotate( 45deg) translateY(-8px);
border: 1px solid #999;
border-width: 1px 1px 0 0;
}
.lottery-winner-content {
font-size: 14px;
height: 201px;
box-sizing: border-box;
padding: 18px 0 0 18px;
overflow: hidden;
position: relative;
border-radius: 0 0 12px 12px;
}
.lottery-winner-list {
line-height: 26px;
height: 260px;
-webkit-animation: 15s activity-lottery-slider linear infinite;
animation: 15s activity-lottery-slider linear infinite;
list-style: none;
}
.lottery-winner-list>li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.lottery-winner-list>li>span {
color: #a4a4a4;
padding: 0 5px;
}
@keyframes activity-lottery-slider {
0% {
}
100% {
transform: translateY(-260px);
}
}
</style>
</head>
<body>
<section class="lottery-winner lottery-winner-hasbg" style="background-image: url(http://i0.hdslb.com/bfs/activity-plat/static/8a3e1fa14e30dc3be9c5324f604e5991/Id-Bxr7cU.png); border: none;">
<div class="lottery-winner-title"><p>获奖名单</p><a>我的中奖信息</a></div>
<div class="lottery-winner-content">
<ul class="lottery-winner-list">
<li>
***--名 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ora_Skywalker <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***菱茹茜 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***的逆时草 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***阿黄啊 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***风 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ん <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ん <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***lorenCe丶QAQ <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***叶 <span>通过抽奖获得了</span> 沙雕头像框
</li>
</ul>
<ul class="lottery-winner-list">
<li>
***--名 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ora_Skywalker <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***菱茹茜 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***的逆时草 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***阿黄啊 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***风 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ん <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ん <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***lorenCe丶QAQ <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***叶 <span>通过抽奖获得了</span> 沙雕头像框
</li>
</ul>
<ul class="lottery-winner-list">
<li>
***--名 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ora_Skywalker <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***菱茹茜 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***的逆时草 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***阿黄啊 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***风 <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ん <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***ん <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***lorenCe丶QAQ <span>通过抽奖获得了</span> 沙雕头像框
</li>
<li>
***叶 <span>通过抽奖获得了</span> 沙雕头像框
</li>
</ul>
</div>
</section>
</body>
</html>