1.Loading特效----圆+旋转120

最新推荐文章于 2021-08-04 01:29:51 发布

Summer丶羽

最新推荐文章于 2021-08-04 01:29:51 发布

阅读量137

点赞数

分类专栏： DIV特效文章标签： CSS特效 DIV特效前端特效 animation HTML

本文链接：https://blog.csdn.net/qq_42779222/article/details/99622600

版权

DIV特效专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.让我们先来看下效果：

在这里插入图片描述

2.HTML结构：

<div class="loading">
    <div class="text">Loading....</div>
    <div class="wrapper">
      <div class="circlesup">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="circlesup2">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="circlesup3">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </div>

3.接着我们理一下思路：

很明显有三层的div，最外层的loading容器是为了让内部的div（.text .circleup）居中显示，内部的circleup是为了方便选择和给内部的.cirle提供定位；
首先将loading定位到居中的位置（可以随意定位），再将.text定位到居中位置，再将内部的.circleup定位相对于left居中，top为0的位置，最后将最里面的.circle定位到.circleup相对于left居中，bottom为-10px（为.circle小圆的height的一半）的位置，如下图所示：
重点来了！！！我们控制.circleup分别旋转120度、240度、360度。然后控制最内部的.circle围绕.cilcleup的中心旋转360度，注意控制最内部.circle的animation的延时时间。

3.具体的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body{
      height: 100%;
      width: 100%;
      font-family: 'Open Sans';
      overflow: hidden;
      background: #403833;
      font-weight: 100;
      color: #f2f2f2;
      font-size: 100%;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .loading{
      position: relative;
      width: 400px;
      height: 400px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      line-height: 400px;
    }
    .text{
      animation: scaleSmall 2s infinite;
    }
    .wrapper{
      width: 100%;
      height: 100%;
    }
    .circlesup{
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: center center;
      transform: rotate(120deg);
    }
    .circlesup2{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
      transform-origin: center center;
      transform: rotate(240deg);
    }
    .circlesup3{
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top:0px;
      transform-origin: center center;
      transform: rotate(360deg);
    }
    .circle{
      position: absolute;
      left: 25%;
      top: 0;
      width: 50%;
      height: 50%;
      transform-origin: 50% 50%;
      animation: test 2s infinite;
    }
    .circle:nth-child(1){
      z-index: 5;
    }
    .circle:nth-child(2){
      animation: test 2s .125s infinite;
    }
    .circle:nth-child(3){
      animation: test 2s .25s infinite;
    }
    .circle:nth-child(4){
      animation: test 2s .375s infinite;
    }
    .circle:nth-child(5){
      animation: test 2s .5s infinite;
    }
    .circle:after{
      content: "";
      position: absolute;
      width: 20%;
      height: 20%;
      left: 40%;
      bottom: -10%;
      border-radius: 50%;
    }
    .circle:nth-child(1):after{
      background: #13A3A5;
    }
    .circle:nth-child(2):after{
      background: #56bebf;
      transform: scale(0.8,0.8);
    }
    .circle:nth-child(3):after{
      background: #ffa489;
      transform: scale(0.6,0.6);
    }
    .circle:nth-child(4):after{
      background: #ff6d37;
      transform: scale(0.4,0.4);
    }
    .circle:nth-child(5):after{
      background: #DB2F00;
      transform: scale(0.2,0.2);
    }
    @keyframes test {
      0% {
        transform: rotate(0deg);
      }

      5% {
        transform: rotate(0deg);
        animation-timing-function: ease-out;
      }
      70% {
        transform: rotate(360deg);
        animation-timing-function: ease-in;
      }
      100% {
        transform: rotate(360deg);
      }
    }
    @keyframes scaleSmall {
      0%{
        transform: scale(0);
      }
      50%{
        transform: scale(1);
      }
      100%{
        transform: scale(0);
      }
    }
  </style>
</head>
<body>
  <div class="loading">
    <div class="text">Loading....</div>
    <div class="wrapper">
      <div class="circlesup">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="circlesup2">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
      <div class="circlesup3">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </div>
</body>
<script>
</script>
</html>

Summer丶羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.Loading特效----圆+旋转120

1.让我们先来看下效果：2.HTML结构：<div class="loading"> <div class="text">Loading....</div> <div class="wrapper"> <div class="circlesup"> <div class="circl...
复制链接

扫一扫

专栏目录