img

CSS 类似中奖名单的上下滚动特效

2021-01-06 0条评论 3.4k次阅读 CSS

废话少说直接上代码，上效果！

代码

<!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>

效果