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

代码语言:html

所属分类:加载滚动

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

代码标签: 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: 2p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0