css实现半圆弧形伸缩loading加载动画效果代码

代码语言:html

所属分类:加载滚动

代码描述:css实现半圆弧形伸缩loading加载动画效果代码

代码标签: css 半圆 弧形 加载 loading 动画

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <style>
        body {
            line-height: 1;
        }
        
        ol, ul {
            list-style: none;
        }
        
        blockquote, q {
            quotes: none;
        }
        
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        
        html {
            overflow-y: scroll;
            font-size: 15px;
        }
        
        /* -----------------------------------------
                   02. BASE TYPOGRAPHY
        -------------------------------------------- */
        
        body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, a {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
        }
        
        body {
            background-color: #ffffff;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            color: #707070;
            font-weight: 400;
            line-height: 1.85;
        }
        
        h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
            margin: 0 0 1rem;
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            line-height: 1.35;
            color: #111111;
        }
        
        h1 {
            margin-top: 0;
            font-size: 2.852em;
        }
        
        h2 {
            font-size: 2.125em;
        }
        
        h3 {
            font-size: 1.853em;
        }
        
        h4 {
            font-size: 1.563em;
        }
        
        h5 {
            font-size: 1.126em;
        }
        
        
        /*========================================
                03. PRE DEFINE CLASS CSS
        ==========================================*/
        .ptb-100 {
            padding: 100px 0;
        }
        
        .gray-light-bg {
            background: #f7f7f7;
            position: relative;
            z-index: 0;
        }
        
        .primary-bg {
            background: #060c21;
        }
        
        .secondary-bg {
            background: #2FF2DF;
        }
        
        .color-primary {
            color: #3264f5;
        }
        
        .color-secondary {
          .........完整代码请登录后点击上方下载按钮下载查看

网友评论0