前端每日挑战の内容弹窗动画

最新推荐文章于 2025-07-24 10:24:14 发布

原创最新推荐文章于 2025-07-24 10:24:14 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

每日挑战学习专栏收录该内容

11 篇文章

订阅专栏

本文分享了一段使用纯HTML和CSS实现的内容弹窗动画，通过跟随前端每日挑战专栏，作者深入学习了CSS3属性，如text-transform和animation-fill-mode的用法，特别是forwards属性如何保持动画结束后的状态，提供了丰富的代码示例和效果预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端每日挑战の内容弹窗动画

内容摘要

伤心啊，写了好几天博客没人看~不过没关系，写博客的主要目的还是为了技术积累。在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016774570

最终效果预览：https://codepen.io/comehope/pen/GYXvez

内容学习

这东西越做越觉得很酷，希望自己能坚持下去吧。做得越多，越习惯里面的内容以及一切css3属性的用法，这次的新内容有text-transform: capitalize;的用法，很简单，规定文本的内容格式，capitalize为首字母大写，还有touppercase等就不多解释了，animation: fade 0.5s ease-in forwards;然后就是这里的forwards，一开始可能不理解，其实是animation-fill-mode 属性的一个值，forwards表示保持动画的最后一个状态属性，因为这里是初始值display：none，所以不用forwards的话，动画结束后内容会消失。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容弹窗动画</title>
</head>
<body>
    <div class="main">
        <a href="#terrestrial" class="open-popup">terrestrial animals</a>
        <a href="#aquatic" class="open-popup">aquatic animals</a>
    </div>
    <section id="terrestrial" class="popup">
        <a href="#" class="back">&lt;back</a>
        <p>????????</p>
    </section>
    <section id="aquatic" class="popup">
        <a href="#" class="back">&lt; back</a>
        <p>??????????</p>
    </section>
</body>
<style>
    /*<!--页面基础属性-->*/
    body{
        margin: 0;
        height: 100vh;
        overflow: hidden;
    }
    .main{
        height: inherit;
        background: linear-gradient(dodgerblue,darkblue);
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .open-popup{
        /*改成IE盒子*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: white;
        font-size: 16px;
        font-family: sans-serif;
        width: 10em;
        height: 4em;
        border: 1px solid;
        text-align: center;
        line-height: 4em;
        text-decoration: none;
        /*转换文本 capitalize为首字母大写*/
        text-transform: capitalize;
        margin: 1em;
    }
    .open-popup:hover{
        border-width: 2px;
    }
    .popup {
        position: absolute;
        top: 0;
        width: 100%;
        height: inherit;
        /*display: flex;*/
        flex-direction: column;
        justify-content: start;
    }
    .popup .back{
        font-size: 20px;
        font-family: sans-serif;
        text-align: center;
        height: 2em;
        line-height: 2em;
        background-color: #dddddd;
        color: black;
        text-decoration: none;
    }

    .popup .back:visited{
        color: black;
    }
    .popup .back:hover{
        background-color: #eee;
    }
    .popup p{
        font-size: 100px;
        text-align: center;
        margin:0.1em 0.05em;
    }
    .popup{
        display: none;
    }
    .popup:target{
        display: flex;
    }

    .popup >*{
        filter:opacity(0);
        /*forwards当动画完成后保持最后一个属性值
        因为元素开始时是display none，所以要保持最后一个状态才能让画面一直呈现
        */
        animation: fade 0.5s ease-in forwards;
        animation-delay: 1s;
    }
    @keyframes fade{
        to{
            filter: opacity(1);
        }
    }
    /*制作一个白色背景*/
    .popup::before{
        content: '';
        position: absolute;
        box-sizing: border-box;
        width: 100%;
        height: 0;
        top: 50%;
        background-color: white;
        -webkit-animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
        -o-animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
        animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
        animation-delay: 0.5s;
    }
    @keyframes open-animate {
        to{
            height:100vh;
            top:0;
        }
    }
    /*制作一条横线，从页面左端横穿到右端*/
    .popup::after{
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: white;
        top: calc((100% - 2px) / 2);
        left: 0;
        -webkit-animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
        -o-animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
        animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
    }
    @keyframes line-animate{
        50%,100%{
            width: 100%;
        }
    }
</style>
</html>