其他代码

炫酷3D立方体预加载loading特效

面包多

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="css/bootstrap.min.js"></script>

HTML 结构

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="loader">
  5.               <div class="box">
  6.                   <div></div>
  7.                   <div></div>
  8.                   <div></div>
  9.                   <div></div>
  10.               </div>
  11.               <div class="box">
  12.                   <div></div>
  13.                   <div></div>
  14.                   <div></div>
  15.                   <div></div>
  16.               </div>
  17.               <div class="box">
  18.                   <div></div>
  19.                   <div></div>
  20.                   <div></div>
  21.                   <div></div>
  22.               </div>
  23.               <div class="box">
  24.                   <div></div>
  25.                   <div></div>
  26.                   <div></div>
  27.                   <div></div>
  28.               </div>
  29.             </div>
  30.         </div>
  31.     </div>
  32. </div>

css 样式

  1. .loader{
  2.     --size: 32px;
  3.     --duration: 800ms;
  4.     width: 96px;
  5.     height: 64px;
  6.     margin: 50px auto;
  7.     transform-style: preserve-3d;
  8.     transform-origin: 50% 50%;
  9.     transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
  10.     position: relative;
  11. }
  12. .loader .box{
  13.     width:  32px;
  14.     height: 32px;
  15.     transform-style: preserve-3d;
  16.     position: absolute;
  17.     top: 0;
  18.     left: 0;
  19. }
  20. .loader .box:nth-child(1){
  21.     transform: translate(100%, 0);
  22.     animation: box1 800ms linear infinite;
  23. }
  24. .loader .box:nth-child(2){
  25.     transform: translate(0, 100%);
  26.     animation: box2 800ms linear infinite;
  27. }
  28. .loader .box:nth-child(3){
  29.     transform: translate(100%, 100%);
  30.     animation: box3 800ms linear infinite;
  31. }
  32. .loader .box:nth-child(4){
  33.     transform: translate(200%, 0);
  34.     animation: box4 800ms linear infinite;
  35. }
  36. .loader .box > div{
  37.     --translateZ: calc(var(--size) / 2);
  38.     --rotateY: 0deg;
  39.     --rotateX: 0deg;
  40.     background: #5c8df6;
  41.     width: 100%;
  42.     height: 100%;
  43.     transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
  44.     position: absolute;
  45.     top: auto;
  46.     right: auto;
  47.     bottom: auto;
  48.     left: auto;
  49. }
  50. .loader .box > div:nth-child(1){
  51.     top: 0;
  52.     left: 0;
  53. }
  54. .loader .box > div:nth-child(2){
  55.     background: #145af2;
  56.     right: 0;
  57.     --rotateY: 90deg;
  58. }
  59. .loader .box > div:nth-child(3){
  60.     background: #447cf5;
  61.     --rotateX: -90deg;
  62. }
  63. .loader .box > div:nth-child(4){
  64.     background: #dbe3f4;
  65.     top: 0;
  66.     left: 0;
  67.     --translateZ: calc(var(--size) * 3 * -1);
  68. }
  69. @keyframes box1{
  70.     0%, 50%{ transform: translate(100%, 0); }
  71.     100%{ transform: translate(200%, 0); }
  72. }
  73. @keyframes box2{
  74.     0%{ transform: translate(0, 100%); }
  75.     50%{ transform: translate(0, 0); }
  76.     100%{ transform: translate(100%, 0); }
  77. }
  78. @keyframes box3{
  79.     0%, 50%{ transform: translate(100%, 100%); }
  80.     100%{ transform: translate(0, 100%); }
  81. }
  82. @keyframes box4{
  83.     0%{ transform: translate(200%, 0); }
  84.     50%{ transform: translate(200%, 100%); }
  85.     100%{ transform: translate(100%, 100%); }
  86. }
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!