CSS特效——倒影加载

CSS特效——倒影加载

一、具体思路

和往常一样，我们先做一个大盒子来包裹项目。之后初始化，接下来定义一个span，一个包含div的div，

用div和他的伪元素制作出圆环的效果，加上定位，之后让内部的小div高等于两倍的宽，在设置边角，达到尾流的效果，其中，还要同过过度的效果，小div的为元素设置成一个圆球，顺便通过盒子阴影来展示光晕，最后通过 -webkit-box-reflect让大盒子产生倒影，再设置大div的旋转动画。

二、步骤代码

1、初始化和HTML

 <div class="outbox">
        <span class="text">Loading……</span>
        <div class="inbox">
            <div class="circle"></div>
        </div>
    </div>

*{
   
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
   
   
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: rgb(7, 15, 26);

}

这里采用流式布局

2、设置大盒子

.outbox{
   
   
    position: relative;
    /* margin: 300px auto; */
    height: 300px;
    width: 350px;
    -webkit-box-reflect:below -1px linear-gradient(transparent  ,rgb(7, 15, 26));/*知识1*/
}

3、设置大div和伪元素

.inbox{
   
   
    position: relative;
    margin: 0 auto;
    /*height: 300px;*/
    height: 100%;
    width: 300px;
    background-color: rgb(13, 10, 37);
    border-radius: 50%;
    animation: zhuanquan 2s linear infinite;
}

.inbox::after{
   
   /*伪元素默认覆盖掉父级元素*/
    content: '';
    position: absolute;
    top: 10px;