【每日一练】187—一款大气漂亮的文章列表效果

每日一练8个月前发布 admin
1,078 0

以下是今天练习的最终效果:

【每日一练】187—一款大气漂亮的文章列表效果

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>【每日一练】187—CSS实现文字轮播滚动效果</title>
    <link rel=”stylesheet” href=”https://unpkg.com/ress/dist/ress.min.css”>
    <link rel=”stylesheet” href=”CSS/style.css”>
</head>
<body>
    <section>
        <div class=”container”>
            <p>欢迎关注,web前端开发</p>
            <div class=”animation”>
                <div class=”first”>
                    <p class=”blink”>一个互联网技术公众号</p>
                </div>
                <div class=”second”>
                    <p class=”blink”>一个前端技术学习平台</p>
                </div>
                <div class=”third”>
                    <p class=”blink”>官方网站:www.webqdkf.com</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

CSS:

@charset “UTF-8”;
body{
    background-color: #82A8D9;
    font-family: ‘Montserrat’, sans-serif;
    font-size: 2rem;
    font-weight: 300;
}
li{
    list-style: none;
}
.container{
    margin: 150px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.animation{
    height: 50px;
    overflow: hidden;
    margin-left: 1rem;
}
.first p,
.second p,
.third p{
    display: inline-block;
    margin-bottom: 2.8rem;
    padding: 0.25rem 0.75rem;
    height: 2.8rem;
    background-color: rgb(255, 255, 255, 0.15);
}
.first{
    animation: text-animation 10s infinite;
}
@keyframes text-animation{
    0%{margin-top: 0;}
    10%{margin-top: 0;}
    20%{margin-top: -5.6rem;}
    30%{margin-top: -5.6rem;}
    40%{margin-top: -11.2rem;}
    60%{margin-top: -11.2rem;}
    70%{margin-top: -5.6rem;}
    80%{margin-top: -5.6rem;}
    90%{margin-top: 0;}
    100%{margin-top: 0;}
}
.blink{
    animation: blink 0.8s infinite;
}
@keyframes blink{
    0%{border-right: 1.5px solid rgba(0, 0, 0, 1);}
    40%{border-right: 1.5px solid rgba(0, 0, 0, 1);}
    50%{border-right: 1.5px solid rgba(0, 0, 0, 0);}
    100%{border-right: 1.5px solid rgba(0, 0, 0, 0);}
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...