您现在的位置是：网站首页> 编程资料编程资料

CSS3制作3D立方体loading特效10种CSS3实现的loading动画，挑一个走吧？CSS3实现渐变的loading加载进度条特效代码CSS loading效果之吃豆人的实现使用css实现android系统的loading加载动画CSS 实现各种 Loading 效果附带解析过程

2021-09-03 1069人已围观

简介这篇文章主要介绍了CSS3制作3D立方体loading特效的示例，帮助大家更好的理解和使用CSS3特效，美化自身网页，感兴趣的朋友可以了解下

简要说明

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

代码解析

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

HTML结构

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特效的资料请关注其它相关文章！

上一篇：css之Display、Visibility、Opacity、rgba和z-index: -1的区别解决CSS中子元素z-index与父元素兄弟节点的层级问题css 层叠与z-index的示例代码CSS3关于z-index不生效问题的解决z-index为负值的元素无法点击到的解决方法CSS z-index 层级关系优先级的概念css z-index层重叠顺序使用介绍css中z-index: 0和z-index: auto的区别

下一篇：CSS 说明横向进度条最后显示文字的实现代码css 横向进度条和竖向进度条实现代码