css实现创意圆点摇摆loading加载动画代码-html代码-BFW代码库

css实现创意圆点摇摆loading加载动画代码

代码语言：html

代码描述：css实现创意圆点摇摆loading加载动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">

    <style>
        body {
      background: #232323;
      font-family: "Oswald", sans-serif;
      overflow: hidden;
    }
    
    .circle {
      position: relative;
      border-radius: 50%;
      background: #ec115e;
      background: radial-gradient(circle, #ec115e 0%, #232323 0%, #43202c 48%, #721c3a 71%, #ff0f63 100%);
      border: 2px solid #ff0f63;
      width: 280px;
      height: 280px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: scale(0.8);
      animation: pulse 2s infinite;
    }
    
    .circle:before {
      position: absolute;
      opacity: 0;
      animation: pulse 2s infinite;
      border-radius: 50%;
      content: "";
      border: 2px solid #ff0f63;
      width: 250px;
      height: 250px;
      background: transparent;
    }
    
    .circle:after {
      position: absolute;
      opacity: 0;
      animation: movemiddle 2s infinite;
      border-radius: 50%;
      content: "";
      border: 2px solid #ff0f63;
      width: 100px;
      height: 100px;
      background: #232323;
      background: linear-gradient(180deg, #232323 41%, #41202c 52%, #5c1e34 66%, #951944 83%, #ff0f63 100%);
    }
    
    .container {
      margin-top: 200px;
      position: relative;
    }
    
    .container .center {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff0f63;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);
      animation: moveball 2s infinite;
      box-shadow: 1px 1px 5px red;
    }
    
    .container h1 {
      font-size: 25px;
      position: absolute;
      width: 130px;
      height: 20px;
      border-radius: 50%;
      background: #232323;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);
      color: white;
      animation: letters 2s infinite;
      /* text-shadow: 2px 2px 12px #ff0f63; */
    }
    
    h1 span:nth-of-type(1) {
      animation: letters 2s infinite;
    }
    
    h1 span:nth-of-type(2) {
      animation: letters2 2s infinite;
    }
    
    h1 span:nth-of-type(3) {
      animation: letters3 2s infinite;
    }
    
    h1 span:nth-of-type(4) {
      animation: letters4 2s infinite;
    }
    
    h1 span:nth-of-type(5) {
      animation: letters5 2s infinite;
    }
    
    h1 span:nth-of-type(6) {
      animation: letters5 2s infinite;
    }
    
    h1 span:nth-of-type(7) {
      animation: letters5 2s infinite;
    }
    
    @keyframes pulse {
      from {
        opacity: 0;
        transform: scale(2);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    @keyframes movemiddle {
      0% {
        opacity: 0;
        transform:.........完整代码请登录后点击上方下载按钮下载查看