css实现步进式loading加载动画-html代码-BFW代码库

css实现步进式loading加载动画

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> - CSS Loading #cpc-fast-slow</title>
    <style>
@import url("https://fonts.googleapis.com/css?family=Oxygen:700&display=swap");
        .about {
            position: fixed;
            z-index: 10;
            bottom: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            transition: all 0.2s ease;
        }
        .about .bg_links {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.15);
            border-radius: 100%;
            backdrop-filter: blur(5px);
            position: absolute;
        }
        .about .logo {
            width: 40px;
            height: 40px;
            z-index: 9;
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/logo_white.svg);
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: 10px 7px;
            opacity: 0.9;
            transition: all 1s 0.2s ease;
            bottom: 0;
            right: 0;
        }
        .about .social {
            opacity: 0;
            right: 0;
            bottom: 0;
        }
        .about .social .icon {
            width: 100%;
            height: 100%;
            background-size: 20px;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            display: flex;
            transition: all 0.2s ease, background-color 0.4s ease;
            opacity: 0;
            border-radius: 100%;
        }
        .about .social.portfolio {
            transition: all 0.8s ease;
        }
        .about .social.portfolio .icon {
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/link.svg);
        }
        .about .social.dribbble {
            transition: all 0.3s ease;
        }
        .about .social.dribbble .icon {
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/dribbble.svg);
        }
        .about .social.linkedin {
            transition: all 0.8s ease;
        }
        .about .social.linkedin .icon {
            background-image: url(https://rafaelalucas91.github.io/assets/codepen/linkedin.svg);
        }
        .about:hover {
            width: 105px;
            height: 105px;
            transition: all 0.6s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        }
        .about:hover .logo {
            opacity: 1;
            transition: all 0.6s ease;
        }
        .about:hover .social {
            opacity: 1;
        }
        .about:hover .social .icon {
            opacity: 0.9;
        }
        .about:hover .social:hover {
            background-size: 28px;
        }
        .about:hover .social:hover .icon {
            background-size: 65%;
            opacity: 1;
        }
        .about:hover .social.portfolio {
            right: 0;
            bottom: calc(100% - 40px);
            transition: all 0.3s 0s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        }
        .about:hover .social.portfolio .icon:hover {
            background-color: #698fb7;
        }
        .about:hover .social.dribbble {
            bottom: 45%;
            right: 45%;
            transition: all 0.3s 0.15s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        }
        .about:hover .social.dribbble .icon:hover {
            background-color: #ea4c89;
        }
        .about:hover .social.linkedin {
            bottom: 0;
            right: calc(100% - 40px);
            transition: all 0.3s 0.25s cubic-bezier(0.64, 0.01, 0.07, 1.65);
        }
        .about:hover .social.linkedin .icon:hover {
            background-color: #0077b5;
        }

        body {
            margin: 0;
      .........完整代码请登录后点击上方下载按钮下载查看