loading 加载动画

最新推荐文章于 2024-05-24 12:57:57 发布

蓝色的乌鸦

最新推荐文章于 2024-05-24 12:57:57 发布

阅读量2k

点赞数

分类专栏： css 网页布局 html5 文章标签： css loading 加载动画

本文链接：https://blog.csdn.net/wangkadm/article/details/51016469

版权

网页布局同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>loading</title>
       <style type="text/css">
              .loadWrap {
                     text-align: center;
                     color: #CCC;
                     font-size: 25px;
                     position: fixed;
                     top: 45%;
                     left: 46%;
                     background: rgba(0, 0, 0, 0.5);
                     padding: 20px;
                     border-radius: 10px;
              }

              .sk-three-bounce {
                     margin: 20px auto;
                     width: 185px;
                     text-align: center;
              }

              .sk-three-bounce .sk-child {
                     width: 20px;
                     height: 20px;
                     background-color: #FFFFFF;
                     border-radius: 100%;
                     display: inline-block;
                     -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
                     animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
              }

              .sk-three-bounce .sk-bounce1 {
                     -webkit-animation-delay: -0.32s;
                     animation-delay: -0.32s;
              }

              .sk-three-bounce .sk-bounce2 {
                     -webkit-animation-delay: -0.16s;
                     animation-delay: -0.16s;
              }

              @-webkit-keyframes sk-three-bounce {
                     0%, 80%, 100% {
                            -webkit-transform: scale(0);
                            transform: scale(0);
                     }
                     40% {
                            -webkit-transform: scale(1);
                            transform: scale(1);
                     }
              }

              @keyframes sk-three-bounce {
                     0%, 80%, 100% {
                            -webkit-transform: scale(0);
                            transform: scale(0);
                     }
                     40% {
                            -webkit-transform: scale(1);
                            transform: scale(1);
                     }
              }
       </style>
</head>
<body>
<div class="loadWrap">
       <div class="sk-three-bounce">
              <div class="sk-child sk-bounce1"></div>
              <div class="sk-child sk-bounce2"></div>
              <div class="sk-child sk-bounce3"></div>
              <div class="sk-child sk-bounce4"></div>
              <div class="sk-child sk-bounce5"></div>
              <div class="sk-child sk-bounce6"></div>
       </div>
       加载中，请稍等…
</div>
</body>
</html>

蓝色的乌鸦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
loading 加载动画

html lang="en">head> meta charset="UTF-8"> title>loadingtitle> style type="text/css"> .loadWrap { text-align: center; colo
复制链接

扫一扫

专栏目录