CCS3 立体箱子 页面载入动画
2022-08-19
阅读 {{counts.readCount}}
评论 {{counts.commentCount}}
<br><br>
## 前言
<br>
本内容非原创 全部基于这个例子 仅做了适当微调
[https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html](https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html)
<br>
之前已经实现过3种加载动画了，链接
[https://zzzmh.cn/single?id=51](https://zzzmh.cn/single?id=51)
[https://zzzmh.cn/single?id=53](https://zzzmh.cn/single?id=53)
[https://zzzmh.cn/single?id=115](https://zzzmh.cn/single?id=115)
<br>
今天是在网上看到这个3D立体箱子效果挺好的，于是再折腾一个新的加载动画效果，顺便用刚学会的requestAnimationFrame做个渐隐动画
[https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html](https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html)
<br>
**效果图**
<br>
在线源码：
[https://gitee.com/tczmh/loading-html-css3-box](https://gitee.com/tczmh/loading-html-css3-box)
线上演示：
(模拟3秒后加载完成，动画渐隐)
[https://tczmh.gitee.io/loading-html-css3-box](https://tczmh.gitee.io/loading-html-css3-box)
<br><br>
## 折腾
<br>
`index.html`
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>3D立方体Loading加载动画 - HTML5 CSS3</title>
<style>
html, body {
margin: 0;
}
/*
* 这里有2个方法实现
* 1 是用下面这段 position: fixed; 一般都是用这个，对原来的内容无要求，缺点是IOS系统微信内置浏览器会遮挡方块。。。目测是微信bug，暂时无解
* 2 是用 display: flex; 曲线救国，缺点是width和height必须对其窗口，如果html body有margin，就会顶到屏幕外面，出现滚动条，
* 且主页内容会被loading-background顶出屏幕
*/
#loading-background {
background-color: #dedede;
width: 100%;
height: 100%;
position: fixed;
}
#loading{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.base {
height: 9rem;
padding: 3rem;
width: 9rem;
transform: rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before {
content: '';
float: left;
height: 3rem;
position: absolute;
width: 3rem;
z-index: 99999;
}
.cube {
background-color: #05afd1;
position: relative;
transform: translateZ(3em);
transform-style: preserve-3d;
transition: .25s;
box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
animation: anim 1s infinite;
}
.cube:after {
background-color: #049dbc;
transform: rotateX(-90deg) translateY(3em);
transform-origin: 100% 100%;
}
.cube:before {
background-color: #048ca7;
transform: rotateY(90deg) translateX(3em);
transform-origin: 100% 0;
}
.cube:nth-child(1) {
animation-delay: 0.05s;
}
.cube:nth-child(2) {
animation-delay: 0.1s;
}
.cube:nth-child(3) {
animation-delay: 0.15s;
}
.cube:nth-child(4) {
animation-delay: 0.2s;
}
.cube:nth-child(5) {
animation-delay: 0.25s;
}
.cube:nth-child(6) {
animation-delay: 0.3s;
}
.cube:nth-child(7) {
animation-delay: 0.35s;
}
.cube:nth-child(8) {
animation-delay: 0.4s;
}
.cube:nth-child(9) {
animation-delay: 0.45s;
}
@keyframes anim {
50% {
transform: translateZ(0.5em);
}
}
</style>
</head>
<body>
<!-- 本内容非原创 全部基于这个例子 仅做了适当微调 https://www.html5tricks.com/demo/css3-3d-cube-loading/index.html -->
<div id="loading-background">
<div id="loading">
<div class="base">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
</div>
</div>
<script>
const loading = document.querySelector('#loading');
const background = document.querySelector('#loading-background');
let opacity = 100;
/** 渐隐动画 每一帧减少1%透明度 1秒60帧 100帧后消失 */
function loadingFadeOut() {
if (opacity > 0) {
requestAnimationFrame(function () {
opacity -= 2;
loading.style.opacity = opacity / 100;
loadingFadeOut()
});
} else {
document.body.removeChild(background);
}
}
// 模拟3秒后 执行加载完成
setTimeout(function () {
loadingFadeOut();
}, 3000)
</script>
</body>
</html>
```
w
其实没什么好讲的，都在代码和注释里了。
1. style可以加到css文件，放head里
2. div 放在body最前面第一行
3. 页面加载完成后调用 loadingFadeOut 方法
<br>
**注意**
有极小概率出现执行不到这行代码
`document.body.removeChild(loading);`
会导致遮罩层永远不消失
保险起见可以额外加一个settimeout
例如10秒后强制隐藏遮罩层
这里就不做演示了 略 ~
<br><br>
## END
<br>
在线源码：
https://gitee.com/tczmh/loading-html-css3-box
线上演示：
(模拟3秒后加载完成，动画渐隐)
https://tczmh.gitee.io/loading-html-css3-box
评论区空空如也，赶紧添加一条评论吧
评论 {{counts.commentCount}}
{{comment.name}}
{{comment.os}}
{{comment.browser}}
{{dateFormatter(comment.createTime)}}
{{comment.message}}
{{comment.reply.name}}
{{comment.reply.os}}
{{comment.reply.browser}}
{{dateFormatter(comment.reply.createTime)}}
{{comment.reply.message}}
沪公网安备31010602005070号