纯CSS3文字Loading动画特效

发表日期：2022-03-07 文章编辑：洛壹网络文章来源：深圳网站建设

纯CSS3文字Loading动画特效

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3文字Loading动画特效</title>

<style>
body {
background:#000;
}

#load {
position:absolute;
width:600px;
height:36px;
left:50%;
top:40%;
margin-left:-300px;
overflow:visible;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}

#load div {
position:absolute;
width:20px;
height:36px;
opacity:0;
font-family:Helvetica, Arial, sans-serif;
animation:move 2s linear infinite;
-o-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
-webkit-animation:move 2s linear infinite;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
color:#35C4F0;
}

#load div:nth-child(2) {
animation-delay:0.2s;
-o-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
animation-delay:0.4s;
-o-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
animation-delay:0.6s;
-o-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
animation-delay:0.8s;
-o-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
animation-delay:1s;
-o-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
}
#load div:nth-child(7) {
animation-delay:1.2s;
-o-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}

@keyframes move {
0% {
    left:0;
    opacity:0;
}
   35% {
       left: 41%;
       -moz-transform:rotate(0deg);
       -webkit-transform:rotate(0deg);
       -o-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   65% {
       left:59%;
       -moz-transform:rotate(0deg);
       -webkit-transform:rotate(0deg);
       -o-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   100% {
       left:100%;
       -moz-transform:rotate(-180deg);
       -webkit-transform:rotate(-180deg);
       -o-transform:rotate(-180deg);
       transform:rotate(-180deg);
       opacity:0;
   }
}

@-moz-keyframes move {
   0% {
       left:0;
       opacity:0;
   }
   35% {
       left:41%;
       -moz-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   65% {
       left:59%;
       -moz-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   100% {
       left:100%;
       -moz-transform:rotate(-180deg);
       transform:rotate(-180deg);
       opacity:0;
   }
}

@-webkit-keyframes move {
   0% {
       left:0;
       opacity:0;
   }
   35% {
       left:41%;
       -webkit-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   65% {
       left:59%;
       -webkit-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   100% {
       left:100%;
       -webkit-transform:rotate(-180deg);
       transform:rotate(-180deg);
       opacity:0;
   }
}

@-o-keyframes move {
   0% {
       left:0;
       opacity:0;
   }
   35% {
       left:41%;
       -o-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   65% {
       left:59%;
       -o-transform:rotate(0deg);
       transform:rotate(0deg);
       opacity:1;
   }
   100% {
       left:100%;
       -o-transform:rotate(-180deg);
       transform:rotate(-180deg);
       opacity:0;
   }
}
</style>

</head>
<body>


<div id="load">
<div><img src="./images/laohu.png"></div>
   <div><img src="./images/laohu.png"></div>
    <div><img src="./images/laohu.png"></div>
     <div><img src="./images/laohu.png"></div>
      <div><img src="./images/laohu.png"></div>
       <div><img src="./images/laohu.png"></div>

</div>
</body>
</html>

上一篇：css制作扇形

下一篇：PhpStorm 2022.1 EAP＃3 发布：增强多行和嵌套数组形状