html - 如何使介绍动画在最后消失或使用 CSS 引导到主页?
问题描述
当我试图让一个介绍动画消失或在它完成后变得透明时,我正在努力使用我的 CSS 代码,所以我们可以看到 HTML 的其余部分(主页)。
这就是我所说的:
body {
background: #000;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: bold;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: text 4s 1;
}
.text2{
font-size: 30px;
color: coral;
}
@keyframes text {
0% {
color: black;
margin-bottom: -40px;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
75% {
letter-spacing: 8px;
margin-bottom: -40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./resources/index.css">
</head>
<body>
<div class="animationbkg">
<div class="container">
<span class="text1"> Welcome to blablabla</span>
<span class="text2"> Your journey to blablabla</span>
</div>
</div>
<main>
<div class="box1">
<h1>SEEK, STRIVE, SUCCEED</h1>
</div>
</main>
</body>
</html>
现在,我想做的是在我的关键帧上,黑色背景和文本在达到 100% 后变得透明或消失;所以我们可以看到主页(HTML的主要部分)问候!
解决方案
您还必须为加载容器设置动画,使其以某种方式淡出,以便显示底层内容。像这样的东西:-
.animationbkg {
height: 100vh;
width: 100%;
position: fixed;
z-index: 1;
background-color: black;
animation: fadeOut 1s forwards 4s ease;
}
@keyframes fadeOut {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
display: none;
}
}
请注意,我们设置了 fadeOut 动画的 4 秒延迟,这确保了 .animationbkg 容器仅在您的初始文本动画完成后才淡出。
position : fixed 和 z-index: 1 只需确保您的动画容器堆叠在顶部并占据整个屏幕。
还要确保使用forwards
动画填充模式,以便元素保留它们在动画的最后一个关键帧中获得的属性。
推荐阅读
- sql - 设置基于查询以替换循环以从给定日期填充所有记录的所有月末日期
- image - 将PNG图像转换为XImage格式
- rust - 别名具有生命周期的通用函数?
- sql - 加入两个查询以形成一个表 - 在 postgres
- typescript - 定义具有准确类型的对象数组
- python - Keras 权重平均
- python - 为什么下面的python代码会抛出内存错误?
- spring-boot - ClassNotFoundException:使用 MockRestServiceServer 时出现 org.junit.Assert 异常
- alexa - 如何将输入传递给handle()以及如何在alexa SDK V2 for Java中调用LaunchRequestHandler的handle()?
- css - 过渡延迟不适用于元素(:之前)CSS