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解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
总结html5自定义属性有哪些
Apr 01 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 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
php存储过程调用实例代码
2013/02/03 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
JavaScript面向对象编程
2008/03/02 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Angular路由简单学习
2016/12/26 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
python画双y轴图像的示例代码
2019/07/07 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python执行时间的几种计算方法
2020/07/31 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
办公室主任职责范本
2014/03/07 职场文书
活动总结模板
2014/05/09 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
大学生见习总结报告
2015/06/24 职场文书
导游词之山东八大关
2019/12/18 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle