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

【字号：大中小】日期：2022-06-16浏览：44作者：雯心

问题描述

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

<p class='d1'></p> .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} }

问题解答

回答1：

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

回答2：

@keyframes 也需要做兼容性处理、加厂商前缀；注意看文档!

上一条：css - 为什么设置了charset="UTF-8"中文还是乱码呢？并且文件编码也是UTF-8,用的sublime下一条：《仙剑奇侠传7》闪退崩溃官方：升级Win系统解决

相关文章：
1. 关于add()方法，这个地方不是很明白，求解释？2. rewrite - nginx alias的用途具体是什么？3. nginx配置多目录访问4. ruby-on-rails - 为什么服务器用nginx上传文件总是失败?5. node.js - mongodb数据库打开报0xc000007b错误6. Nginx配置转发问题7. linux - 突然ssh就登不上了……ftp倒是正常、项目运行也正常8. node 使用 redis 来缓存数据，需要每次请求都创建链接吗？9. php - foreach既然是操作原数组的副本，为什么这样写还能改变原数组呢10. 网上那些Apache禁止空机头的方面是什么原理？