如何编写一个高效的开机loading动画代码？

K-seo • 2024-08-16 12:25 • 技术教程 • 53 views

css，@keyframes fadeInUp {，  0% {，    opacity: 0;，    transform: translate3d(0, 100%, 0);，  }，  to {，    opacity: 1;，    transform: none;，  }，}，，.fadeInUp {，  animationname: fadeInUp;，  animationduration: 2s;，  animationfillmode: both;，}，

`，，在HTML中，将需要显示动画的元素添加fadeInUp`类即可。

Loading动画代码开机动画

（图片来源网络，侵删）

我们将探讨如何创建一个简单的loading动画，这种动画常常用于网页或应用的加载过程中，以提供给用户视觉反馈，我们将使用HTML、CSS和JavaScript来实现这个动画。

第一步：HTML结构

我们需要创建一个HTML文件，并在其中添加一个div元素，该元素将作为我们动画的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>Loading Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="loader"></div>
    <script src="script.js"></script>
</body>
</html>

第二步：CSS样式

我们需要为我们的loader添加一些基本的样式，我们将使用CSS的关键帧动画来实现loading效果。

（图片来源网络，侵删）

/* styles.css */
body {
    display: flex;
    justifycontent: center;
    alignitems: center;
    height: 100vh;
    backgroundcolor: #f3f3f3;
    margin: 0;
}
.loader {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    bordertop: 5px solid #3498db;
    borderradius: 50%;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

第三步：JavaScript交互

虽然我们的loading动画现在已经可以正常工作，但在某些情况下，我们可能需要通过JavaScript来控制动画的开始和结束，当页面内容加载完成时，我们可能想要停止动画。

// script.js
document.addEventListener("DOMContentLoaded", function() {
    var loader = document.querySelector('.loader');
    // 模拟加载过程
    setTimeout(function(){
        loader.style.display = 'none'; // 隐藏loader
    }, 3000); // 3秒后隐藏loader
});

单元表格