龙空技术网

纯html+css编写发光Loading特效

代码的边城 275

前言:

此刻大家对“css加上特效”大体比较重视,咱们都需要学习一些“css加上特效”的相关内容。那么小编在网上收集了一些对于“css加上特效””的相关内容,希望姐妹们能喜欢,你们快快来了解一下吧!

先展示效果图

<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;

把以上代码添加注释后,得到的效果图

我们可以发现白色区域的形状发生了变化。将背景改回原来的颜色,我们就可以得到一个新的特效

标签: #css加上特效