css实现图标飞入篮中loading加载动画效果代码-html代码-BFW代码库

css实现图标飞入篮中loading加载动画效果代码

代码语言：html

代码描述：css实现图标飞入篮中loading加载动画效果代码

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

<html>
<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>

        html, body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
        }

        .loader {
            width: 130px;
            height: 170px;
            position: relative;
        }
        .loader::before, .loader::after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            bottom: 30px;
            left: 15px;
            z-index: 1;
            transform: scale(0);
            transition: all 0.2s ease;
        }
        .loader .txt {
            width: 120%;
            text-align: center;
            position: absolute;
            bottom: -30px;
            left: -7%;
            font-family: 'Abel', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            color: white;
        }

        .loader .box {
            width: 100%;
            height: 140px;
            display: block;
            color: white;
            position: absolute;
            top: -70px;
            left: -18px;
            z-index: 2;
            overflow: hidden;
        }
        .loader .box::before, .loader .box::after {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .loader .box:nth-child(1)::before {
            font-size: 20px;
            content: "\f13b";
            animation: a 1.1s linear infinite;
        }
        .loader .box:nth-child(1)::after {
            content: "\f13c";
            animation: b 1.3s linear infinite;
        }
        .loader .box:nth-child(2)::before {
            content: "\f121";
            font-size: 25px;
            animation: c 0.9s linear infinite;
        }
        .loader .box:nth-child(2)::after {
            content: "\f19a ";
            animation: d 0.7s linear infinite;
        }
        .loader.amit::before, .loader.amit::after {
            transform: scale(1);
   .........完整代码请登录后点击上方下载按钮下载查看