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 选择器 属性选择器介绍
Jan 21 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 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加密解密的代码
2007/07/16 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
php之可变函数的实例详解
2017/09/13 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
火山动力Java笔试题
2014/06/26 面试题
自我鉴定思想方面
2013/10/07 职场文书
春节活动策划方案
2014/01/24 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
七年级上册生物的课件
2019/08/07 职场文书