JS 页面加载动画：实现一个渐变出现的矩形
以下是一个简单的示例：
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面动画效果</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
}
#box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #fff;
animation: fadeIn 2s ease-out forwards;
}
@keyframes fadeIn {
from {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript 代码：
window.onload = function() {
var box = document.getElementById("box");
box.style.animation = "";
}
这个示例中，页面打开后会出现一个中心点对称的白色矩形，矩形会在2秒内从小到大缩放并渐变出现。JavaScript 代码中的 window.onload 事件会在页面加载完成后执行，将矩形的 animation 属性设置为空，使得动画效果结束后，矩形保持在最终状态。
原文地址: http://www.cveoy.top/t/topic/l0Dx 著作权归作者所有。请勿转载和采集!