html - 使用：after和animation制作的遮罩层出现的问题？

问题描述

问 题

想做一个当网页打开时.d1有个淡出效果动画，但是d1始终是空白？

<div class="d1"></div>

    .d1{
        width: 20px;
        height: 20px;
        background-color: red;
        position: relative;
    }
    .d1:after{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 1;
        -webkit-animation: d1_mask 5s linear 0 forwards;
        animation: d1_mask 5s linear 0 forwards;
    }
    @keyframes d1_mask{
        0%{opacity: 1}
        100%{opacity: 0}
    }

解决方案

animation: d1_mask 5s linear forwards;这样，forward不要跟count同时使用

这篇关于html - 使用：after和animation制作的遮罩层出现的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！