我正在尝试使用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级，然后是2级，然后是3级。 我有上面的代码，但无法正常工作。在stops中图像diplaying后我想只使用css而不使用js或jquery
答案 0 :(得分：5)
首先，您无法为display属性设置动画，因此建议您使用opacity。
此外，班级名称不能以数字开头。
最后，要结束动画并保持最终属性，您必须使用animation-fill-mode。在这种情况下，值为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
答案 1 :(得分：1)
这是一个摆弄
的工作示例HTML
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
CSS
div {
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
animation: show;
-webkit-animation: show;
animation-fill-mode: forward;
-webkit-animation-fill-mode: forward;
}
.one {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.two {
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.three {
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
@keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
@-webkit-keyframes show {
from {opacity: 0;}
to {opacity: 1;}
}
答案 2 :(得分：0)
可见性动画使用opacity代替display