2201_75350968 2023-04-03 22:54 采纳率: 71.4%
浏览 22
已结题

HTML初始化加载动画

请问如何在打开网页的时候先在网页内浮现一张图片，然后过几秒自动消失呢？

  • 写回答

1条回答 默认 最新

  • 语言-逆行者 2023-04-03 23:05
    关注

    定时器实现就好

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="image" style="display:block;"><img src="../image/下午好.gif"></div>
    <script>
        setTimeout(function() {
         document.getElementById("image").style.display = "none";
        }, 5000); // 5000表示5秒后隐藏图片，单位是毫秒

    </script>
</body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

  • vue初始化动画加载的实例
    2020-10-18 02:13
    在描述中提到了一个具体的例子，即在Vue项目的入口文件`index.html`中加入了一个加载动画。这是一个基于CSS3的加载动画，通过`<style>`标签内定义的动画关键帧(`@-webkit-keyframes` 和 `@keyframes`)来实现。这个...
  • 前端页面初始化加载速度优化方案
    2025-10-28 10:43
    啃火龙果的兔子的博客 前端页面初始化加载速度优化方案
  • vue实现设置载入动画和初始化页面动画效果
    2020-10-16 02:37
    总结来说，加载动画和页面初始化动画的实现是通过在HTML中添加带有动画样式的元素，并在Vue组件的生命周期钩子函数中移除该元素来完成的。这种动画不仅可以吸引用户的注意力，缓解等待的焦虑感，还可以让整个应用看...
  • vue自定义正在加载动画的例子
    2020-10-15 23:54
    在Vue组件中，我们首先定义一个定时器属性`loading_timer`，这将在组件的data函数中初始化： ```javascript data() { return { loading_timer: null }; } ``` #### 2. 加载动画的触发 为了触发加载动画，我们...
  • HTML+CSS+JS实现网页初始加载动画（loading）
    2021-08-15 22:43
    爱洋芋的土豆丶的博客 首先需要找一个loading的gif，在这里提供一个比较简单的加载动画 然后是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
  • HTML5 Canvas加载动画特效特效代码
    2021-03-20 00:48
    1. **初始化Canvas**：首先在HTML中创建一个`<canvas>`元素，然后在JavaScript中获取其2D渲染上下文（`ctx = canvas.getContext('2d')`）。 2. **定义动画参数**：包括圆心位置、半径、颜色、填充样式等。例如，...
  • 前端加载动画/加载等待动画
    2017-01-17 15:09
    sxpsxp12的博客 可以在数据请求时显示加载动画，等动画加载完成再隐藏加载动画，让前端更具交互友好性。 网上百度了很多关于这方面的资料，但是好多感觉都很繁琐，本着偷懒的心态，在html5应用开发框架ionic中找到了该加载动画的库...
  • cesium开场地球旋转代码，html,三维开发实例 前端开发
    2022-05-21 12:40
    在这个实例中，我们将会看到如何初始化Cesium Viewer对象，并设置其初始视角为地球旋转动画。 为了实现地球旋转的效果，我们需要使用Cesium的`Viewer`类和其内置的`Clock`对象。`Viewer`是Cesium的主要入口点，包含...
  • 纯CSS3加载动画Loading特效代码.zip
    2022-11-25 10:22
    在这个加载动画代码中，HTML5可能被用来创建结构化的元素，如`<div>`或自定义的Web组件，来承载和展示这些CSS3动画。 jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。尽管这个...
  • 前端初始代码前端初始代码前端初始代码
    2023-07-25 15:20
    初始代码可能包含一个或多个JS文件，它们负责页面的事件处理、数据交互、动画效果等。现代前端项目往往使用模块化工具，如CommonJS或ES6的import/export语法。 4. **前端框架/库**：如今，前端开发者常使用像React...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 4月13日
  • 已采纳回答 4月5日
  • 创建了问题 4月3日