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

代码语言:html

所属分类:加载滚动

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

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

网友评论0