使伪元素出现，然后在X个时间后再次消失
可以通过CSS动画实现。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.element {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.element::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
opacity: 0;
animation: fadeOut Xs linear forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>在上面的代码中，我们创建了一个带有伪元素的元素.element，并使用CSS动画fadeOut控制伪元素的出现和消失。伪元素通过::after选择器来定义，并设置了初始状态的透明度为1，即完全不透明。动画fadeOut定义了从透明度1到透明度0的过渡效果，并在X秒后完成。通过animation属性将动画应用于伪元素。
这样，当页面加载后，伪元素会出现在.element元素上，并在X秒后逐渐消失。你可以根据需要调整元素的样式和动画的持续时间。
相关·内容
3回答
我正在尝试操纵body标记的:before伪元素，使其在一段时间后出现，然后在几秒钟后再次消失。height: 100%; z-index: 100; left: 0;}
因此，本质上，我试图在X秒后显示带有伪
浏览 11提问于2018-08-18得票数 0
回答已采纳
我想要一个元素出现，以防网站已经有一段时间没有使用，并使它消失后，它是再次使用。如果有一段时间没有移动鼠标，有什么方法可以在网站上检测到吗？
浏览 0提问于2013-09-01得票数 0
回答已采纳
1回答
假设input元素在该元素的末尾有伪元素::after，然后有一个按钮，即在input元素和button元素之间有伪元素::after。例如，请看下面的图片-在上面的示例中，当单击button时，经过一段时间后，input被更改，::after伪元素消失。
如何检测输入是否有::after？
浏览 0提问于2019-10-02得票数 2
回答已采纳
是否有另一种方法比通过timeout()使元素在特定时间自动出现和消失？类似于伪代码中的ng-if="system.Time>12:00:00“。最好只用html完成。我的目标是提供一个有效的一个小时，例如。
浏览 5提问于2022-02-03得票数 0
4回答
我希望当用户滚动到页面上的特定位置(900像素向下)，然后在特定位置(1800像素向下)消失时，div会出现。我有一个有效的解决方案，但是当用户向上滚动时，它会中断，超过初始出现点(从顶部900像素)。
在这一点上，它不会再次消失。因此，总而言之，我需要帮助修改我的代码，使div在经过它出现的原始点后再次消失。.fixedDiv').f
浏览 0提问于2013-07-21得票数 3
回答已采纳
我想创造一个间隔，改变我的主题的价值。情况是，5秒后，我想在页面上显示一个元素。它应该显示10秒后，它消失了。在接下来的5秒之后，它应该再次出现，以此类推，10秒后消失。例如，如果我将选项设置为在页面加载5秒后显示弹出窗口，则弹出窗口将显示10秒，之后弹出窗口消失。5秒后，它应该会再次显示，以此类推。我不知道如
浏览 1提问于2020-02-12得票数 0
回答已采纳
2回答
我的屏幕上显示了大量的可打印，其中包含一个打印按钮，如下所示： <StackPanel"/></Border>
但是，当这个块打印出来时，我不希望print按钮被打印出来，所以我在打印之前隐藏它，并在打印后使它再次可见，如下所
浏览 4提问于2009-12-28得票数 1
所以我做了一个点击游戏，有点卡住了。当你取得成就时，我想要一个像cookieClicker一样的弹出窗口。它弹出并告诉您发生了什么，您可以单击x，否则几秒钟后它就会消失。我试着用纯javascript和CSS制作一些东西，但没有用，它会很好地消失，但不会自动消失。
那么，我如何使它能够在创建/显示X元素时，在3秒后消失呢？此外，如果重要
浏览 8提问于2016-11-27得票数 0
回答已采纳
2回答
以下是我的(简化)情况：
单击该按钮将启动一个动画，该动画将扩展div的高度。当div展开时，:after伪元素(包含文本'look')消失，然后在动画的末尾重新出现。有没有办法防止伪元素消失，使其在整个动画过程中都可见？
浏览 0提问于2013-07-21得票数 6
回答已采纳
我正在尝试添加一个功能到我的游戏，其中一个img出现在一定的时间。在再次消失之前或在单击之前，只显示一段时间。下面是我的代码，但是它不能工作，因为clearInterval在执行之前已经结束了消失函数。但是没有它，计时器就会继续，图像也会同时出现和消失。我如何使图像停留5秒，然后再次消失，然后
浏览 7提问于2022-10-19得票数 -1
回答已采纳
我正在用C#创建一个2.5D的统一格斗游戏。目前，我正在尝试让一个保险杠出现在播放器周围，并在一段时间后消失。我已经成功地让保险杠出现和消失了一次，但在那之后，当我试图让保险杠再次出现时，Unity对我来说有一个错误：“类型为'GameObject‘的对象已被销毁，但您仍在尝试访问它。”在论坛上提出了一些关于同一问题的问题后，我再次修改
浏览 143提问于2019-02-08得票数 1
回答已采纳
2回答
我有个问题要问你：再次调用setVisible(true)使它再次出现，这意味着对象完全仍然在内存中，对吗？如果我需要在按下“关闭”按钮后立即清除所有内容，那么正确的方法是什么(当我按下主UI中的"config“按钮时，就会显示这个JFrame，所以当我按”关闭“按钮时，它就会消失(也会从内存中消失)？谢谢你抽出时间为我糟糕的英
浏览 2提问于2016-01-01得票数 1
回答已采纳
可能重复：
当用户与我们的<select>元素交互时，我的客户希望我显示一些简单的说明，以便使<option>列表下拉(或者“下拉”，我想，因为如果<select>框下没有太多空间，一些浏览器会向上打开然后，一旦用户进行了新的选择，从而导致选项列表消失，或者只是关闭选项列表而不做更改，指令就应该再次消失。我认为我是相当有经验的--使用CSS/CSS 3选择器和jQuery事件使事情像一个充满指令的&
浏览 10提问于2012-10-22得票数 7
回答已采纳
我在iOS 11上iPad上使用Phonegap有问题。如果单击“选择”，则会在弹出窗口中显示选项。在选择一个之后，弹出短暂消失，选择中的选项改变，然后弹出重新出现。>这是使用最新的Phonegap 7.0.1。<!选择
浏览 0提问于2017-09-22得票数 9
回答已采纳
我最近取消发布了一个免费应用程序，更改了包名称，并将相同的应用程序(在不同开发人员的帐户下)上传为付费应用程序。
问题是一发布，就又变得可用了！
浏览 6提问于2013-07-17得票数 1
回答已采纳
因此，我必须实现一个Jquery函数，其中每个li元素都在执行:hover伪类(它只改变背景色)。因此，如果我悬停到第4元素，所有以前的li元素(1，2，3)都应该有来自:hover伪类的更改的背景色！但如果我再次移动鼠标，:hover效应应该消失(正常背景色再次)，直到我的鼠标是点(如果它是在第二元素，只有第一和第二有悬停效果现在).我完全不知道我怎么能创造出这样的方法..。).addClass(
浏览 0提问于2018-05-05得票数 0
回答已采纳
3回答
我试图使它，以便当我悬停在我的一个链接在我的启动页面，它显示文本和其他按钮消失。然后，当你停止在它上盘旋时，元素就会再次出现。到目前为止我还没有什么想法。我想，对于其他元素，您必须不显示任何元素，但是当在另一个元素上盘旋时，我不知道hwo为其他元素显示任何元素。
浏览 6提问于2014-04-15得票数 1
回答已采纳
我有两个在first display:none时隐藏的文本，如果我点击object1，它下面的文本会出现，如果我点击object2，另一个文本会出现，但第一个文本会消失。然后，我可以再次单击object1，使第二个文本消失，第一个文本出现。
但我不能再次将文本放到display:none;中，因为我现在必须在单击其中一个
浏览 0提问于2016-05-07得票数 0
2回答
执行一个进程后，屏幕顶部会出现一个闪光灯，其中包含一些基本信息(例如。“表中加入”)。当这种情况发生时，页面中的所有元素都会随着闪光灯从顶部下降而向下移动。闪光灯停留了一会儿，然后消失了。在闪光灯消失后，文本就会移动到原来的位置。闪存的代码是用jQuery编写的，我对此不熟悉。ui-state-highlight ui-corner-all&#
浏览 4提问于2014-03-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
