CSS吃吃吃loading动画

举报
周棋洛 发表于 2022/05/26 01:05:20 2022/05/26
【摘要】 我们在浏览网页或者使用APP时，经常会看到这样一个动画：加载动画，不得不说，我去网上百度搜索了一下，就看到好多简洁却不乏味的加载特效，你会发现一个不错的加载特效可以让人发呆，一直盯着看，啊哈，反证我就看了...

我们在浏览网页或者使用APP时，经常会看到这样一个动画：加载动画，不得不说，我去网上百度搜索了一下，就看到好多简洁却不乏味的加载特效，你会发现一个不错的加载特效可以让人发呆，一直盯着看，啊哈，反证我就看了好一会，然后就想到了之前看到的一个一直吃吃吃的加载特效，我去网上找，也没有找到我想要的，额，既然这样，那就自己动手用CSS写一个吧！！！说干就干

先来看一下我最终实现的效果：
也可以网址访问到：吃吃吃loading
在这里插入图片描述
好，这个加载动画彷佛一直在吃，哈哈，看着还挺享受的，我就起名叫"吃吃吃loading"

1.分析元素

因为我是新手，没什么发言权，就分享一下我coding的过程，先分析元素，两个半圆通过转动即可实现类似张嘴的动画，然后写豆豆就慢慢调优就好，最后写个小眼睛注入灵魂。其他的元素自己发挥，我这里就是再复习一下昨天学的，这种小型的我们可以快速的在脑袋中思考，然后编码会发现很顺利，然后如果说对于稍微大点的程序的话，最好有设计稿，有脑图等等，帮助梳理的辅助。好了，那就coding吧！

2.html

就是写元素盒子，不必多说，哈哈，你可以说我命名不规范，可我会的都用英文来命名了，我也是很严谨的，哈哈哈🤣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃吃吃loading</title>
</head>
<body>
    <div class="div">
    	/*⚪*/
        <div class="yuan"></div>
        /*豆豆*/
        <div class="doudou"></div>
        /*眼睛，哈哈，我可是用的英文*/
        <div class="eye"></div>
        /*写的字*/
        <div class="wenzi">快到嘴里来</div>
        /*边框*/
        <div class="box"></div>
    </div>
</body>
</html>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    •

3.CSS

有关CSS的注释我基本都写了，看代码就完事了

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: rgb(111, 111, 111);
        }
        .div{
            height: 200px;
            width: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 2d */
            transform: translate(-50%,-50%);
        }
        /* 画两个⚪ */
        .yuan{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        /* 伪元素选择器,分别使用after，before的伪类画出两个半圆，然后再寻转角度 */
        .yuan::after{
            /* 设置相对的圆角边框 */
            bottom: 0;
            border-radius: 0 0 200px 200px;
            content: "";
            width: 100%;
            height: 50%;
            position: absolute;
            background-color: rgb(240, 190, 11);
            /* 设置旋转元素的基点位置 */
            transform-origin: 50% 0%;
            /* 顺时针旋转45° */
            transform: rotate(45deg);
            /* 使用关键帧,让它一直吃吃吃吃 */
            animation: eatMove 1s linear infinite;
        }
        .yuan::before{
            /* 设置相对的圆角边框 */
            top: 0;
            border-radius: 200px 200px 0 0;
            content: "";
            width: 100%;
            height: 50%;
            position: absolute;
            background-color: rgb(240, 190, 11);
            /* 设置旋转元素的基点位置 */
            transform-origin: 50% 100%;
            /* 逆时针旋转45° */
            transform: rotate(-45deg);
            animation: eatMove 1s linear infinite;
        }
        .doudou{
            width: 200px;
            height: 50px;
            position: absolute;
            right: -50%;
            top: 50%;
            /* 只设置Y轴,使得对齐 */
            transform: translateY(-50%);
            /* 浮动元素的 z-index属性默认为0,谁大谁显示在上面,这是为了产生吃掉的效果 */
            z-index: -1;
        }
        .doudou::before,
        .doudou::after{
            content: "";
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            background-color: rgb(255, 170, 0);
            transform: translateY(-50%);
            right: -30px;
        }

        .doudou::before{
            animation: doudouMove 0.8s linear infinite;
        }
        /* 这里的延时使得看上去一次吃了两个,其实是由最后的参数延时一秒造成的 */
        .doudou::after{
            animation: doudouMove 0.8s linear infinite /*1s*/;
        }
        /* 眼睛注入灵魂 */
        .eye{
            width: 30px;
            height: 30px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            top: 15%;
            left: 50%;
        }
        .wenzi{
            width: 90px;
            height: 30px;
            display: block;
            position: absolute;
            top: 110%;
            left: 25%;
            color: rgba(255, 170, 0);
            font-family: fangsong;
            font-size: 18px;
            line-height: 30px;
            text-align: center;
            box-shadow: 2px 2px 3px 2px rgb(218, 134, 134),inset 2px 2px 3px 2px royalblue;
        }
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid rgb(240, 190, 11);
            border-radius: 10px;
            position: absolute;
            top: -50%;
            left: -50%;
            box-shadow: 2px 2px 3px 2px rgb(218, 134, 134),inset 2px 2px 3px 2px royalblue;
        }
        /* doudou关键帧 */
        @keyframes doudouMove{
            100%{
                right: 100%;
            }
        }


        /* chi关键帧 */
        @keyframes eatMove{
            50%{
                /* 复制粘贴,把旋转的再转回来就OK */
                transform: rotate(0deg);
            }
        }

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    • 
  
  • 46
    • 
  
  • 47
    • 
  
  • 48
    • 
  
  • 49
    • 
  
  • 50
    • 
  
  • 51
    • 
  
  • 52
    • 
  
  • 53
    • 
  
  • 54
    • 
  
  • 55
    • 
  
  • 56
    • 
  
  • 57
    • 
  
  • 58
    • 
  
  • 59
    • 
  
  • 60
    • 
  
  • 61
    • 
  
  • 62
    • 
  
  • 63
    • 
  
  • 64
    • 
  
  • 65
    • 
  
  • 66
    • 
  
  • 67
    • 
  
  • 68
    • 
  
  • 69
    • 
  
  • 70
    • 
  
  • 71
    • 
  
  • 72
    • 
  
  • 73
    • 
  
  • 74
    • 
  
  • 75
    • 
  
  • 76
    • 
  
  • 77
    • 
  
  • 78
    • 
  
  • 79
    • 
  
  • 80
    • 
  
  • 81
    • 
  
  • 82
    • 
  
  • 83
    • 
  
  • 84
    • 
  
  • 85
    • 
  
  • 86
    • 
  
  • 87
    • 
  
  • 88
    • 
  
  • 89
    • 
  
  • 90
    • 
  
  • 91
    • 
  
  • 92
    • 
  
  • 93
    • 
  
  • 94
    • 
  
  • 95
    • 
  
  • 96
    • 
  
  • 97
    • 
  
  • 98
    • 
  
  • 99
    • 
  
  • 100
    • 
  
  • 101
    • 
  
  • 102
    • 
  
  • 103
    • 
  
  • 104
    • 
  
  • 105
    • 
  
  • 106
    • 
  
  • 107
    • 
  
  • 108
    • 
  
  • 109
    • 
  
  • 110
    • 
  
  • 111
    • 
  
  • 112
    • 
  
  • 113
    • 
  
  • 114
    • 
  
  • 115
    • 
  
  • 116
    • 
  
  • 117
    • 
  
  • 118
    • 
  
  • 119
    • 
  
  • 120
    • 
  
  • 121
    • 
  
  • 122
    • 
  
  • 123
    • 
  
  • 124
    • 
  
  • 125
    • 
  
  • 126
    • 
  
  • 127
    • 
  
  • 128
    • 
  
  • 129
    • 
  
  • 130
    • 
  
  • 131
    • 
  
  • 132
    • 
  
  • 133
    • 
  
  • 134
    •

你学废了吗？😎，驾考科二约不了了，(｡･∀･)ﾉﾞ嗨，在家啃《计算机网络》吧

在这里插入图片描述

文章来源: blog.csdn.net，作者：周棋洛ყ ᥱ ᥉，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/m0_53321320/article/details/119216662

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入