先展示效果图
<html>
<head>
<meta charset="UTF-8">
<title>发光Loading加载框动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="loader">
<h1></h1>
<div class="loading_box">
<div class="symbol">
<p>Loading...</p>
<div></div>
</div>
</div>
</section>
</body>
</html>
//css一部分代码
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 15px;
}
html {
font-family: sans-serif;
}
.loader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
margin: 0;
background: #34495d;
}
.loader .loading_box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); //使其定位于页面中心
min-width: 350px;
height: 300px;
padding: 50px;
border: 2px solid #9febe0;
border-radius: 100px;
background: #34495d;
//设置边框阴影颜色
box-shadow: 5px 5px 50px 15px rgba(0, 255, 235, 0.3);
}
.loader .loading_box .symbol {
text-align: center;
}
.loader .loading_box .symbol p {
font-size: 1.5em;
font-weight: bold;
color: #fff;
margin: 30px 0;
}
设置好基本属性后，单独把使中间这个〇运动的代码摘出来
.loader .loading_box .symbol div {
//新建一个50×50的正方形
width: 50px;
height: 50px;
margin: 0px auto;
//使正方形成为一个直径为50的〇
border-radius: 50%;
//给圆圈添加边框
//添加白色的边框
border-top: 5px solid #fff;
//添加透明的边框，目的是让整个div的形状
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
//div的背景颜色
background: rgba(255, 255, 255, 0);
//添加旋转动画
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
}
//该动画用于实现画面中不停旋转的圈圈
@keyframes rotate {
0% {
//选转div元素为0度
transform: rotate(0deg);
}
100% {
//旋转到360度
transform: rotate(360deg);
}
}
以上，我们展示的效果图就完成了
当然可能一些人会对我上面的弯月形和梯形的注释不解，在这里我们把此页面的整体颜色魔改，体会一下这个css具体实现的原因吧
.loader .loading_box .symbol div {
width: 50px;
height: 50px;
margin: 0px auto;
border-radius: 50%;
border-top: 5px solid #fff;
border-left: 5px solid red;
border-right: 5px solid red;
border-bottom: 5px solid red;
background: green;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
}
应用这样的css属性后，我们查看一下效果图
//border-left: 5px solid red;
//border-right: 5px solid red;
//border-bottom: 5px solid red;
把以上代码添加注释后，得到的效果图
我们可以发现白色区域的形状发生了变化。将背景改回原来的颜色，我们就可以得到一个新的特效
最新评论