热门标签 | 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!!


推荐阅读
  • 最详尽的4K技术科普
    什么是4K?4K是一个分辨率的范畴,即40962160的像素分辨率,一般用于专业设备居多,目前家庭用的设备,如 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 在今天的实践中,我深入学习了网页图像抓取技术,通过编写爬虫程序批量获取网站上的图片资源。具体来说,我选择了一个包含大量高质量图片的网站作为练习对象,并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解,还增强了我的编程能力。 ... [详细]
  • CSS中的pointer-events属性详解与应用
    在CSS中,`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时,通过设置`pointer-events`属性,可以决定该元素是否能够接收鼠标点击、悬停等交互操作,从而实现更灵活的用户界面设计。例如,将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件,方便实现复杂的叠加效果和交互逻辑。 ... [详细]
  • 成功实现Asp.Net MVC3网站与MongoDB数据库的高效集成
    我们成功地构建了一个基于Asp.NET MVC3框架的网站,并实现了与MongoDB数据库的高效集成。此次更新不仅完善了基本的创建和显示功能,还全面实现了数据的增删改查操作。在创建功能方面,我们修复了之前代码中的错误,确保每个属性都能正确生成。此外,我们还对数据模型进行了优化,以提高系统的性能和稳定性。 ... [详细]
  • 本文深入探讨了 HTML 中的 `margin` 属性,详细解析了其基本特性和应用场景。文章不仅介绍了 `margin` 的基本概念,还重点讨论了垂直外边距合并现象,并分析了 `margin` 在块级元素与内联元素中的不同表现。通过实例和代码示例,帮助读者全面理解 `margin` 的使用技巧和常见问题。 ... [详细]
  • 在前一篇文章中,我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求,包括参数格式、请求封装等关键技巧,并通过“历史上的今天”API实例进行详细说明。 ... [详细]
  • CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果 ... [详细]
  • 本文介绍了几种常用的图像相似度对比方法,包括直方图方法、图像模板匹配、PSNR峰值信噪比、SSIM结构相似性和感知哈希算法。每种方法都有其优缺点,适用于不同的应用场景。 ... [详细]
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]
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社区 版权所有