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特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 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
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
JavaScript cookie原理及使用实例
2020/05/08 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
基于Python的接口测试框架实例
2016/11/04 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python遍历numpy数组的实例
2018/04/04 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python和php哪个容易学
2020/06/19 Python
Pycharm github配置实现过程图解
2020/10/13 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android