我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

在加载页面时候，加上一个loading不仅酷炫也能给用户带来更好的体验，很多UI都有相关组件，接下来我们用CSS简单做一个兔子元素loading，在loading结束后页面出现‘新年快乐’。

实现

具体的实现我们分为三部分——遮罩层、兔子图片、旋转元素。接下来我们逐步实现：

遮罩层。我们利用position定位属性值将其脱离文件流,将背景色设置为黑色，再设置下透明度，这里利用rgba同时设置颜色和透明度：

   .modal {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
      }

兔子图片。兔子图片我们居中展示，通过position，transform实现垂直水平居中，一定要利用translate位移一下，因为top、left设置的是左上顶点的位置。

   .rabbit{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);//必须要位移一下
      }

旋转动画。loading样式这里选用旋转样式。首先利用border-radius制作出来一个圆形div，将边框展示出来，将上下边框设置为透明，增加观感。将上下边框颜色属性值设置为transparent就能实现透明。最后利用rotate3d()写出旋转效果，旋转同时，我们要利用translate将物体平移保持在中心。

    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        border: 2px solid red;
        border-radius: 50%;
        border-color: transparent red;
        animation: circle 1s infinite linear;
        transform-origin: center;
      }
    @keyframes circle {
        0% {

          transform:translate(-50%,-50%) rotate3d(0,0,1,0deg);
        }
        100% {
          transform:translate(-50%,-50%) rotate3d(0,0,1,360deg);
        }
      }

   <div class="modal">
    <div class="loading">
    </div>
    <img class="rabbit" src="./images/rabbit.png" alt="">
   </div>

loading结束后利用延时器将‘新年快乐’展示出来：

    setTimeout(() => {
        const el = document.getElementById('content');
        el.innerText = '新年快乐';
        const modal = document.getElementsByClassName('modal')[0];
        modal.style.display = 'none'
      },2000);

总结

这样我们就看得到兔子loading效果，重点是利用动画做出旋转效果，通过transform将div中心位移到中心。

[兔了个兔]——兔子loading

前言

实现

总结