Vue实现网页首屏加载动画

2025/5/11 15:51:30 来源：https://blog.csdn.net/qq_43557848/article/details/144714377 浏览: 次关键词：Vue实现网页首屏加载动画

效果预览

在这里插入图片描述

在public/index.html 文件中添加动画

<!DOCTYPE html>
<html lang=""><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"><link rel="icon" href="./favicon.ico"><title>后台管理系统</title><style>.loading-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #2d3a4b;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 9999;}.loading-spinner {border: 8px solid #f3f3f3;/* Light grey */border-top: 8px solid #3498db;/* Blue */border-radius: 50%;width: 50px;height: 50px;animation: spin 1s linear infinite;}.loading-message {font-size: 20px;color: #fff;margin-top: 10px;/* 调整上边距 */}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div class="loading-overlay" id="loadingOverlay"><div class="loading-spinner"></div><div class="loading-message">正在加载系统资源，请耐心等待...</div></div><div id="app"></div><script>// 模拟内容加载完成window.addEventListener('load', function() {var loadingOverlay = document.getElementById('loadingOverlay');if (loadingOverlay) {loadingOverlay.style.display = 'none';}});</script></body><script src="./config.js"></script>
</html>

Vue实现网页首屏加载动画

效果预览

在public/index.html 文件中添加动画

相关资讯

热文排行

最新新闻

推荐新闻

热搜词