CSS3制作3D立方体loading特效


Posted in HTML / CSS onNovember 09, 2020

简要说明

这是一款css3炫酷3D立方体预加载loading特效。该特效通过简单的HTML元素和CSS3代码,构建几个立方体不停运动的动画特效,适用于做页面的loading效果。

CSS3制作3D立方体loading特效

代码解析

在HTML文件中引入下面的文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />

HTML结构

<div class="demo" style="min-height:350px;">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</div>
</div>
</div>
</div>
</div>

css样式

.loader{
                    --size: 32px;
                    --duration: 800ms;
                    width: 96px;
                    height: 64px;
                    margin: 50px auto;
                    transform-style: preserve-3d;
                    transform-origin: 50% 50%;
                    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
                    position: relative;
                }
                .loader .box{
                    width:  32px;
                    height: 32px;
                    transform-style: preserve-3d;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .loader .box:nth-child(1){
                    transform: translate(100%, 0);
                    animation: box1 800ms linear infinite;
                }
                .loader .box:nth-child(2){
                    transform: translate(0, 100%);
                    animation: box2 800ms linear infinite;
                }
                .loader .box:nth-child(3){
                    transform: translate(100%, 100%);
                    animation: box3 800ms linear infinite;
                }
                .loader .box:nth-child(4){
                    transform: translate(200%, 0);
                    animation: box4 800ms linear infinite;
                }
                .loader .box > div{
                    --translateZ: calc(var(--size) / 2);
                    --rotateY: 0deg;
                    --rotateX: 0deg;
                    background: #5c8df6;
                    width: 100%;
                    height: 100%;
                    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
                    position: absolute;
                    top: auto;
                    right: auto;
                    bottom: auto;
                    left: auto;
                }
                .loader .box > div:nth-child(1){
                    top: 0;
                    left: 0;
                }
                .loader .box > div:nth-child(2){
                    background: #145af2;
                    right: 0;
                    --rotateY: 90deg;
                }
                .loader .box > div:nth-child(3){
                    background: #447cf5;
                    --rotateX: -90deg;
                }
                .loader .box > div:nth-child(4){
                    background: #dbe3f4;
                    top: 0;
                    left: 0;
                    --translateZ: calc(var(--size) * 3 * -1);
                }
                @keyframes box1{
                    0%, 50%{ transform: translate(100%, 0); }
                    100%{ transform: translate(200%, 0); }
                }
                @keyframes box2{
                    0%{ transform: translate(0, 100%); }
                    50%{ transform: translate(0, 0); }
                    100%{ transform: translate(100%, 0); }
                }
                @keyframes box3{
                    0%, 50%{ transform: translate(100%, 100%); }
                    100%{ transform: translate(0, 100%); }
                }
                @keyframes box4{
                    0%{ transform: translate(200%, 0); }
                    50%{ transform: translate(200%, 100%); }
                    100%{ transform: translate(100%, 100%); }
                }

以上就是CSS3制作3D立方体loading特效的详细内容,更多关于CSS3 loading特效的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 #HTML / CSS
CSS3制作圆形滚动进度条动画的示例
Nov 05 #HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 #HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 #HTML / CSS
CSS3实现时间轴特效
Nov 02 #HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 #HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 #HTML / CSS
You might like
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python3实现微型的web服务器
2019/09/03 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
远程教育心得体会
2014/01/03 职场文书
超市客服工作职责
2014/06/11 职场文书
教师个人读书活动总结
2014/07/08 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
银行求职信怎么写
2019/06/20 职场文书
python实现简单反弹球游戏
2021/04/12 Python
索尼ICF-5900W收音机测评
2022/04/24 无线电