热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用css动画在10秒后显示div

如何解决《使用css动画在10秒后显示div》经验,为你挑选了1个好方法。

我正在尝试使用HTML和CSS制作生日卡片.以下是代码示例.






  
  
  
  




  

Happy Birthday

Another year has passed,

It's your birthday once more,

You should feel very special,

And let your spirit soar.

Celebrate every moment,

There's no time to be blue,

Today is your birthday,

Today is all about you.

May you always find joy,

North, south, east and west,

Happy, happy birthday to you,

I wish you the very best.

Happy Birthday Dear!!

我想要做的是在显示几个图像后,我想一个接一个地显示div中的内容.第一个div用1级然后是2然后3.我有上面的代码但不能正常工作.在stops中图像diplaying后我想只使用CSS而不是js或jquery



1> Paulie_D..:

首先,你不能动画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;
  }
}

Happy Birthday

Another year has passed,

It's your birthday once more,

You should feel very special,

And let your spirit soar.

Celebrate every moment,

There's no time to be blue,

Today is your birthday,

Today is all about you.

May you always find joy,

North, south, east and west,

Happy, happy birthday to you,

I wish you the very best.

Happy Birthday Dear!!


推荐阅读
author-avatar
juxiu小妹_895
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有