我正在尝试使用 HTML 和 CSS 制作一张生日贺卡。以下是代码示例。
<!DOCTYPE HTML>
<html>
<head>
<title>Happy Birthday !</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="http://www.happybirthdaycake2015.com/wp-content/uploads/2014/11/Birthday-Cake-Candles.jpeg" />
<style>
html {
-webkit-animation: chngepic 5s;
/* Chrome, Safari, Opera */
animation: chngepic 5s;
}
@-webkit-keyframes chngepic {
0% {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
}
50% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
}
100% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
}
}
@keyframes chngepic {
0% {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
}
50% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
}
100% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
}
}
div.one {
-webkit-animation: show 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 5s;
/* Chrome, Safari, Opera */
animation: show 5s;
animation-delay: 5s;
}
div.two {
-webkit-animation: show 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 10s;
/* Chrome, Safari, Opera */
animation: show 5s;
animation-delay: 10s;
}
div.three {
-webkit-animation: show 5s;
/* Chrome, Safari, Opera */
-webkit-animation-delay: 15s;
/* Chrome, Safari, Opera */
animation: show 5s;
animation-delay: 15s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes show {
from {
display: block;
}
to {
display: none;
}
}
@keyframes show {
from {
display: block;
}
to {
display: none;
}
}
}
</style>
</head>
<body>
<center>
<div class="one" style="display: none;">
<h1>Happy Birthday</h1>
</div>
<div class="two" style="display: none;">
<p>Another year has passed,</p>
<p>It's your birthday once more,</p>
<p>You should feel very special,</p>
<p>And let your spirit soar.</p>
<p>Celebrate every moment,</p>
<p>There's no time to be blue,</p>
<p>Today is your birthday,</p>
<p>Today is all about you.
<p>May you always find joy,</p>
<p>North, south, east and west,</p>
<p>Happy, happy birthday to you,</p>
<p>I wish you the very best.</p>
</div>
<div class="three" style="display: none;">
<h2>Happy Birthday Dear!!</h2>
</div>
</center>
</body>
</html>我想做的是在显示几张图像后，我想一个接一个地显示 div 中的内容。首先是 1 类的 div，然后是 2 类，然后是 3 类。 我有上面的代码，但不能正常工作。在停止显示图像后。我只想使用 css 而没有 js 或 jquery
最佳答案
首先，您不能为 display 属性设置动画，因此我建议改用 opacity。
此外，类名不能以数字开头。
最后，要结束动画并保留您必须使用animation-fill-mode 的final 属性。在这种情况下，该值将是 forwards。
html {
-webkit-animation: chngepic 5s;
/* Chrome, Safari, Opera */
animation: chngepic 5s;
background-repeat: no-repeat;
}
@-webkit-keyframes chngepic {
0% {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
}
50% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
}
100% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
}
}
@keyframes chngepic {
0% {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLZJu3R2KoQA9W4EpcTA3oenwpl9MiWd7AcLX1_V6reXxWVQB7);
}
50% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIZiSe34UlhOVSqfjwNwYZ8gcJfJYzWghkAmnNT1NaT1kca-aW);
}
100% {
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHz_hTYFVeIKvjZtmj55gXwPoWqK_c-RvILhrQGRu9kJ4c-pO9);
}
}
.a,
.b,
.c {
opacity: 0;
-webkit-animation: show 5s;
animation: show 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.a {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.b {
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
.c {
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<div class="a">
<h1>Happy Birthday</h1>
</div>
<div class="b">
<p>Another year has passed,</p>
<p>It's your birthday once more,</p>
<p>You should feel very special,</p>
<p>And let your spirit soar.</p>
<p>Celebrate every moment,</p>
<p>There's no time to be blue,</p>
<p>Today is your birthday,</p>
<p>Today is all about you.</p>
<p>May you always find joy,</p>
<p>North, south, east and west,</p>
<p>Happy, happy birthday to you,</p>
<p>I wish you the very best.</p>
</div>
<div class="c">
<h2>Happy Birthday Dear!!</h2>
</div>关于填充模式的有用文章@ Sitepoint.com
关于html - 使用 css 动画在 10 秒后显示一个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28941671/