gpt4 book ai didi

javascript - 文本动画使用css淡出和进入部分文本

转载 作者:太空宇宙 更新时间:2023-11-03 21:06:02 25 4
gpt4 key购买 nike

我正在尝试为一些文本制作动画,但在获得我想要的结果时遇到了一些问题。我有一首诗(每个句子在它自己的 div 中)我希望淡出,然后在悬停时淡入,保持一段时间可见,然后再次淡出。有点像寻找文本并提示用户悬停在哪里的游戏。

这是我目前的代码:

.poem {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.hide {
opacity: 0;
transition: all ease 15s;
}

.hide:hover {
border: 1px solid black;
opacity: 1;
}

.hint {
-webkit-animation: fadeinout 30s linear forwards;
animation: fadeinout 5s linear forwards;
}

@-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}

@keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Cardo" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Opacity 1</title>
</head>
<body>
<div id="wrapper">
<div class="hint poem hide">I have emotions</div>
<div class="poem hide">that are like newspapers that</div>
<div class="poem hide">read themselves.</div>
<div class="poem hide">I go for days at a time</div>
<div class="poem hide">trapped in the want ads.</div>
<div class="poem hide">I feel as if I am an ad</div>
<div class="poem hide">for the sale of a haunted house:</div>
<div class="poem hide">18 rooms</div>
<div class="poem hide">$37,000</div>
<div class="poem hide">I'm yours</div>
<div class="poem">ghosts and all.</div>
<div class="poem hide">Richard Brautigan</div>
</div>
</body>
</html>

到目前为止,我只尝试过使用 css,但我也欢迎任何 javascript 建议!

任何帮助将不胜感激!

提前致谢!

最佳答案

我没有向前运行,而是只运行了一次,所以它不会在最后一帧停止。应该工作:

.hint {
-webkit-animation: fadeinout 5s 1 linear ;
animation: fadeinout 5s 1 linear ;
}

工作示例: https://jsfiddle.net/nsf25rz0/2/

关于javascript - 文本动画使用css淡出和进入部分文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52685189/

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