gpt4 book ai didi

javascript - 关键帧动画不会离开

转载 作者:太空宇宙 更新时间:2023-11-04 05:36:55 25 4
gpt4 key购买 nike

所以我刚开始学习代码,所以我想我会从一些简单的东西开始,包括一些样式方面和使用关键帧的动画。当我的一个动画开始时,“你好”这个词会淡入视野,然后淡出视野。但是当动画完成后,hello 这个词并没有完全消失,它突然出现在我屏幕的左上角并且不会离开。只是好奇是否有人知道如何摆脱。就像我说的,我刚刚开始学习,所以任何简单的步骤都会受到赞赏。我输入我目前拥有的代码。

谢谢。

<!DOCTYPE html>
<style>
.star1{
border-radius:50%;
width:25px;
height:25px;
position:fixed;
animation-name: flash;
animation-duration: 1s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star2{
border-radius:50%;
width:15px;
height:15px;
position:fixed;
animation-name: twinkle;
animation-duration: 2s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star3{
border-radius:50%;
width:25px;
height:25px;
position:fixed;
animation-name: bright;
animation-duration: 3s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:linear;
}
.star4{
border-radius:50%;
width:10px;
height:10px;
position:fixed;
animation-name: blink;
animation-duration:2s;
animation-iteration-count: infinite;
background:white;
animation-timing-function:ease-out;
}

.moon{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 50%;
box-shadow: 25px 10px 0px 0px white;
left:350px;
bottom:300px;
}

@keyframes flash{
0%{
top:50px; left:100px; opacity:0.5;
}
50%{
top:50px; left:100px; transform:scale(0.5);opacity:.25;
}
100%{
top:50px; left:100px; opacity:0.5;
}
}

@keyframes twinkle{
0%{
top:250px; left:300px; opacity:0.5;
}
20%{
top:250px; left:300px; transform:scale(0.5);opacity:.25;
}
100%{
top:250px; left:300px; opacity:0.5;
}
}

@keyframes bright{
0%{
top:100px; left:0px; opacity:0.5;
}
50%{
top:125px; left:700px; transform:scale(0.5);opacity:.25;
}
100%{
top:120px; left:700px; transform(0.1); opacity:0;
}
}

@keyframes blink{
0%{
top:100px; left:450px; opacity:0.25;
}
50%{
top:100px; left:450px; transform:scale(0.5);opacity:.15;
}
100%{
top:100px; left:450px; opacity:0.25;
}
}
.h1{

font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;

}


@keyframes words{
0%{
top:400px; left:300px; opacity:0;
}
50%{
top:400px; left:300px; opacity:1;
}
100%{
top:400px; left:300px; opacity:0; display:none;
}
}
#back {
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);

</style>

<div id="back"></div>
<div class="moon"></div>
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
<div class="star4"></div>
<div class="h1">Hello</div>

最佳答案

动画结束后,div 仅具有您在其上定义的属性,因此只需将 opacity:0; 添加到 .h1

   .h1 {
font-family:monotype;
Font-size:120px;
color:black;
position:absolute;
animation-name:words;
animation-duration:5s;
animation-iteration-count:1;
opacity:0;
}

关于javascript - 关键帧动画不会离开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59555380/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com