启动页面UI(HTML)

从模糊到现实 浮现


<!DOCTYPE html>

<html>

<head>

<style>

.body {

background-color:#f8f8f8;

}

/* 定义动画效果 */

@keyframes openingAnimation {

0% { opacity: 0; }

100% { opacity: 1; }

}

/* 设置动画元素样式 */

.animation {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

animation: openingAnimation 3s ease-in-out;

}

/* 设置网页内容样式 */

/* 设置背景样式 */

.background

width: 100%;

height: 900vh;

}

</style>

</head>

<body>

<div class="background">

<div class="animation">

<img src="tupian/y.png" width="370px"/>

<p>在滑动一次退出</p>

</div>

</div>

<script>

// 动画播放完毕后打开网址

setTimeout(function() {

window.location.href = "index.html";

}, 2000);

</script>

<body style="background-color: #f8f8f8;">

<!-- 网页内容 -->

</body>

</html>

相关推荐
烛阴2 分钟前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc18 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy24 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq43 分钟前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
angleoldhen2 小时前
网页版的点名/抽奖程序
html·抽奖·点名
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者2 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny