css实现一只猫转圈的loading加载动画效果代码-html代码-BFW代码库

css实现一只猫转圈的loading加载动画效果代码

代码语言：html

代码描述：css实现一只猫转圈的loading加载动画效果代码

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

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

<head>

    <meta charset="UTF-8">

    <style>
        .cat {
            position: relative;
            width: 100%;
            max-width: 20em;
            overflow: hidden;
            background-color: #e6dcdc;
        }
        .cat::before {
            content: '';
            display: block;
            padding-bottom: 100%;
        }
        .cat:hover > * {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
        }
        .cat:active > * {
            -webkit-animation-play-state: running;
            animation-play-state: running;
        }

        .cat__head, .cat__tail, .cat__body {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
            animation: rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite;
        }
        .cat__head::before, .cat__tail::before, .cat__body::before {
            content: '';
            position: absolute;
            width: 50%;
            height: 50%;
            background-size: 200%;
            background-repeat: no-repeat;
            background-image: url("https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il");
        }

        .cat__head::before {
            top: 0;
            right: 0;
            background-position: 100% 0%;
            -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .cat__tail {
            -webkit-animation-delay: .2s;
            animation-delay: .2s;
        }
        .cat__tail::before {
            left: 0;
            bottom: 0;
            background-position: 0% 100%;
            -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
            -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
        }

        .cat__body {
            -webkit-animation-delay: .1s;
            animation-delay: .1s;
        }
        .cat__body:nth-of-type(2) {
            -webkit-animation-delay: .2s;
            animation-delay: .2s;
        }
        .cat__body::before {
            right: 0;
            bottom: 0;
            background-position: 100% 100%;
            -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
        }

@-webkit-keyframes rotating {
            from {
                -webkit-transform: rotate(720deg);
                transform: rotate(720deg);
   .........完整代码请登录后点击上方下载按钮下载查看