CSS3特效（1）——loading效果_it博客站

效果一：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .loading{
         width: 80px;
         height: 40px;
         margin: 0 auto;
         margin-top:100px;
      }
      .loading span{
         display: inline-block;
         width: 8px;
         height: 100%;
         border-radius: 4px;
         background: lightgreen;
         -webkit-animation: load 1s ease infinite;
      }
      @-webkit-keyframes load{
         0%,100%{
            height: 40px;
            background: lightgreen;
         }
         50%{
            height: 70px;
            margin: -15px 0;
            background: lightblue;
         }
      }
      .loading span:nth-child(2){
         -webkit-animation-delay:0.2s;
      }
      .loading span:nth-child(3){
         -webkit-animation-delay:0.4s;
      }
      .loading span:nth-child(4){
         -webkit-animation-delay:0.6s;
      }
      .loading span:nth-child(5){
         -webkit-animation-delay:0.8s;
      }
   </style>
</head>
<body>
<div class="loading">
   
   
   
   
   
</div>
</body>
</html>

效果二：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
      .loadEffect{
         width: 100px;
         height: 100px;
         position: relative;
         margin: 0 auto;
         margin-top:100px;
      }
      .loadEffect span{
         display: inline-block;
         width: 20px;
         height: 20px;
         border-radius: 50%;
         background: lightgreen;
         position: absolute;
         -webkit-animation: load 1.04s ease infinite;
      }
      @-webkit-keyframes load{
         0%{
            -webkit-transform: scale(1.2);
            opacity: 1;
         }
         100%{
            -webkit-transform: scale(.3);
            opacity: 0.5;
         }
      }
      .loadEffect span:nth-child(1){
         left: 0;
         top: 50%;
         margin-top:-10px;
         -webkit-animation-delay:0.13s;
      }
      .loadEffect span:nth-child(2){
         left: 14px;
         top: 14px;
         -webkit-animation-delay:0.26s;
      }
      .loadEffect span:nth-child(3){
         left: 50%;
         top: 0;
         margin-left: -10px;
         -webkit-animation-delay:0.39s;
      }
      .loadEffect span:nth-child(4){
         top: 14px;
         right:14px;
         -webkit-animation-delay:0.52s;
      }
      .loadEffect span:nth-child(5){
         right: 0;
         top: 50%;
         margin-top:-10px;
         -webkit-animation-delay:0.65s;
      }
      .loadEffect span:nth-child(6){
         right: 14px;
         bottom:14px;
         -webkit-animation-delay:0.78s;
      }
      .loadEffect span:nth-child(7){
         bottom: 0;
         left: 50%;
         margin-left: -10px;
         -webkit-animation-delay:0.91s;
      }
      .loadEffect span:nth-child(8){
         bottom: 14px;
         left: 14px;
         -webkit-animation-delay:1.04s;
      }
   </style>
</head>
<body>
<div class="loadEffect">
   
   
   
   
   
   
   
   
</div>
</body>
</html>

转载于:https://www.cnblogs.com/janas-luo/p/9605544.html

原文地址：https://blog.csdn.net/weixin_34320159/article/details/94490937?ops_request_misc=&request_id=a05761a87d824a90b16140c604312fda&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-14-94490937-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

HuaShen

CSS3特效（1）——loading效果

目录

效果一：

效果二：

打赏作者

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

QQXML 卡片菜单代码分享

【iapp】手电筒源码

【分享】🔥测量大师🔥测量身高🔥内置众多功能

当前未登陆哦

关于此站

学习网站

优秀排版个人博客

(穷逼博主)在线接单