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实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
2006/12/14 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
JS的get和set使用示例
2014/02/20 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
javaScript基础详解
2017/01/19 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
京东优选小程序的实现代码示例
2020/02/25 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python类的多重继承问题深入分析
2014/11/09 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Python unittest模块用法实例分析
2018/05/25 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python语言元素知识点详解
2019/05/15 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
深入了解NumPy 高级索引
2020/07/24 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
香港士多网上超级市场:Ztore
2021/01/09 全球购物
软件测试常见笔试题
2012/02/04 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
分享python函数常见关键字
2022/04/26 Python