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;
left: 10px;
right: 10px;
bottom: 10px;
background-color: rgb(7, 15, 26);
border-radius: 50%;
}
为了产生不必要的麻烦,由于倒影产生的,大DIV的高必须和父元素一致。由于伪元素的层级会比父元素高,在这次中方便了我们操作。
4、设置小div和伪元素
.circle{
position: absolute;
top: 1px;
left: 55px;
width: 75px;
height: 150px;
background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 40%);/*知识二*/
border-radius: 75px 0 0 75px;
}.circle::after{
content: '';/*这是伪元素特有的属性,没啥作用*/
position: absolute;
right: -5px;
top: -2.5px;
width: 15px;
height: 15px;
background-color: rgb(40, 124, 202);
box-shadow: 0 0 5px rgb(40, 151, 202),
0 0 10px rgb(40, 124, 202),
0 0 20px rgb(40, 124, 202),
0 0 30px rgb(40, 124, 202),
0 0 40px rgb(40, 124, 202),
0 0 50px rgb(40, 124, 202);/*知识三*/
border-radius: 50%;
z-index: 1;
}
5、设置动画
@keyframes zhuanquan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
6、设置文字
.outbox>span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: rgb(20, 129, 202);
text-shadow: 0 0 10px rgb(20, 129, 202),
0 0 30px rgb(20, 129, 202),
0 0 60px rgb(20, 129, 202),
0 0 100px rgb(20, 129, 202);
font-size: 35px;
z-index: 1;
}
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
这些操作是为了动态的保持文字再正中心
三、全部代码
1、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒影加载</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="outbox">
<span class="text">Loading……</span>
<div class="inbox">
<div class="circle"></div>
</div>
</div>
</body>
</html>
2、CSS
*{
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);
}
.outbox{
position: relative;
/* margin: 300px auto; */
height: 300px;
width: 350px;
-webkit-box-reflect:below -1px linear-gradient(transparent ,rgb(7, 15, 26));/*全过度*/
}
.inbox{
position: relative;
margin: 0 auto;
height: 300px;
width: 300px;
background-color: rgb(13, 10, 37);
border-radius: 50%;
animation: zhuanquan 2s linear infinite;
}
@keyframes zhuanquan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.inbox::after{/*伪元素默认覆盖掉父级元素*/
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background-color: rgb(7, 15, 26);
border-radius: 50%;
}
.circle{
position: absolute;
top: 1px;
left: 55px;
width: 75px;
height: 150px;
background-image: linear-gradient(180deg,rgb(22, 121, 252) ,transparent 40%);
border-radius: 75px 0 0 75px;
}.circle::after{
content: '';
position: absolute;
right: -5px;
top: -2.5px;
width: 15px;
height: 15px;
background-color: rgb(40, 124, 202);
box-shadow: 0 0 5px rgb(40, 151, 202),
0 0 10px rgb(40, 124, 202),
0 0 20px rgb(40, 124, 202),
0 0 30px rgb(40, 124, 202),
0 0 40px rgb(40, 124, 202),
0 0 50px rgb(40, 124, 202);
border-radius: 50%;
z-index: 1;
}
.outbox>span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
color: rgb(20, 129, 202);
text-shadow: 0 0 10px rgb(20, 129, 202),
0 0 30px rgb(20, 129, 202),
0 0 60px rgb(20, 129, 202),
0 0 100px rgb(20, 129, 202);
font-size: 35px;
z-index: 1;
}
四、知识点
1、-webkit-box-reflect
-webkit-box-reflect:below -1px linear-gradient(transparent ,rgb(7, 15, 26));
第一个是方位值:倒影再元素的什么地方出现; = above | below | left | right
第二个是间隔大小值:倒影离元素有多远; = length或percentage
为length时:用长度来表示,px……
为percentage时:用百分比来表示。
第三个是有无遮罩层: = none | url| linear-gradient() | radial-gradient() | repeating-linear-gradient() | repeating-radial-gradient()
详解看CSS3 box-reflect 属性 - w3c html
2、 linear-gradient()
第一个是渐变起点:left、right、top、bottom
第二个是渐变颜色
第三个是渐变多少:用百分比 transparent 40%;
还可以写角度,就是旋转多少度才开始渐变
3、box-shadow
这样写就是为了显示出光晕的效果,记住这个方法就行。