css3动画实现loading

最新推荐文章于 2023-07-11 11:07:51 发布

simba爱睡觉

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量481

点赞数

分类专栏：小功能文章标签： css3 css动画

本文链接：https://blog.csdn.net/DemoD/article/details/78577214

版权

小功能专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="loading">
        <div class="round left-round"></div>
        <div class="round right-round"></div>
    </div>
</body>
</html>

css

.loading {
  width: 50px;
  height: 15px;
  position: fixed;
  left: 50%;
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  /*safari and chrome*/
  -ms-transform: translate(-50%, -50%);
  /*IE 9*/
  -moz-transform: translate(-50% -50%);
  /*firefox*/
  -o-transform: translate(-50%, -50%);
  /*opera*/
  animation: fadeIn 0.5s ease-in-out 1;
  -webkit-animation: fadeIn 0.5s ease-in-out 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.loading .round {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  z-index: 0;
  animation: rotate .5s ease-in-out infinite alternate,zIndex 1s ease-in-out infinite;
  -webkit-animation: rotate .5s ease-in-out infinite alternate,zIndex 1s ease-in-out infinite;
}

.loading .round.left-round {
  background: #FFA217;
}

.loading .round.right-round {
  background: #3E7CD4;
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
}

@keyframes rotate {
  100% {
    transform: translate(35px);
    -webkit-transform: translate(35px);
  }
}

@keyframes zIndex {
  25% {
    z-index: 1;
  }
  75% {
    z-index: -1;
  }
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

simba爱睡觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画实现loading

html Document css.loading { width: 50px; height: 15px; position: fixed; left: 50%; top: 50%; opacity: 0; transform: transla
复制链接

扫一扫