纯CSS3做的机器人和进度条动画

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

废话少叙,且看效果和代码。

20200506063958125.gif


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载动画</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- jquery在线引入网址 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        /* 初始化所有的元素 */
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            /* 设置背景 */
            background-color: aqua;
            /*
            一种布局方式。它即可以应用于容器中,也可以应用于行内元素
            目前,它已经得到了所有浏览器的支持。
            Flex是Flexible Box的缩写,意为"弹性布局",
            用来为盒状模型提供最大的灵活性。设为Flex布局以后,
            子元素的float、clear和vertical-align属性将失效。
            */
            display: flex;
            /* 
            实现的是水平居中
            */
            justify-content: center;
            /* 
            实现的是垂直居中
            */
            align-items: center;
        }
        /* 设置怪物样子 */
        .monster{
            position: relative;
            width: 100px;
            height: 100px;
            /* 0.5相当于50% 就变成了一个圆 */
            border-radius: 10px;
            background-color: black;
            /* 分开两个怪物 */
            margin: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 按照列来排序 默认是行排序 */
            flex-direction: column;
            /* 设置阴影 第一个是X的偏移量 第二个是Y的偏移量 第三个是阴影的距离 最后一个是阴影的颜色值*/
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            /* 设置动画 第一个设置变量名 name 第二个时间 一直跳一直跳 0到-50 来回都做一个动画,不然非常突兀的感觉,就i有一个缓冲的效果*/
            animation: jumping 0.8s infinite alternate;
        }
        /* 设置眼睛 */
        .monster .eye{
            /* 基于父级的40% */
            width: 40%;
            height: 40%;
            /* 设置圆角 */
            border-radius: 50%;
            background-color: white;
            margin: 10px;
            /* 为了设置眼球居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /* 设置眼球 */
        .monster .eye .eyeBall{
            width: 50%;
            height: 50%;
            border-radius: 50%;
            background-color: thistle;
            animation: eyemove 1.6s infinite alternate;
        }
        .monster .mouth{
            width: 32%;
            height: 12px;
            border-radius: 12px;
            background-color: white;
        }
        /* 头上的角
            :befor和::before写法是等效的
            :befor是CSS2的写法,::before是CSS3的写法
            伪类对象要配合content属性一起使用
            伪类对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
            伪类对象的特效通常要使用:hover伪类样式来激活
            之所以被称为伪元素,是因为他们不是真正的页面元素
            tml没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样
            可以对其使用诸如页面元素一样的css样式,
            表面上看上去貌似是页面的某些元素来展现,
            实际上是css样式展现的行为,因此被称为伪元素。
            :after 伪元素在元素之后添加内容。
            头上的角是两个 -- 旋转 45°之后拼成的
        */
        .monster::before,.monster::after{
            /* absolute会找他最近的有定位的父级定位,不管是reletive还是absolute */
            position: absolute;
            /* content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。 */
            content: '';
            /* 变成一个盒子,可以设置 宽高 */
            display: block;
            width: 20%;
            height: 10px;
            border-radius: 10px;
            background-color: white;
            /* 基于monster定位 */
            top: -10px;
            left: 50%;
        }
        /* 设置每个角的平移和旋转 */
        .monster::before{
            /* 平移 旋转rotate */
            transform: translateX(-70%) rotate(45deg);
        }
        .monster::after{
            transform: translateX(-30%) rotate(-45deg);
        }
        .monster.blue{
            /* 给他加上延迟 第一个跳了 他才跳 */
            animation-delay: 0.5s;
            background-color:wheat;
        }
        .monster.blue .eyeBall,.monster.blue .mouth{
            background-color: darkkhaki;
        }
            /* @keyframes规则可以使用来创建动画,
            创建动画是通过逐步改变从一个CSS样式到另一个CSS样式,
            在动画过程中,您可以更改CSS样式的设定多次,
            指定的变化时发生时使用%,或关键字"from"和"to",
            这是和0%到100%相同,0%是开头动画,
            100%是当动画完成。为了获得最佳的浏览器支持,
            您应该始终定义为0%和100%的选择器。
            @keyframes规则是css3中新增规则,目前主流浏览器都支持该规则(加浏览器对应的前缀),
            但不兼容IE 9以及更早版本的浏览器。
            关键帧 
            jumping 相当于变量
            */
        @keyframes jumping{
            50%{
                top: 0;
                /* 在他没有往上跳的时候的阴影 */
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            }
            100%{
                top: -50px;
                /* 在他跳起来的时候 Y方向变*/
                box-shadow: 0 120px 20px rgba(0, 0, 0, 0.2);
            }
        }
        /* 设置眼睛X方向移动 */
        @keyframes eyemove{
            0%,10%{
                transform: translate(50%);
            }
            90%,100%{
                transform: translate(-50%);     
            }
        }
        /* 铺满屏幕 */
        .pageLoading{
            /* 基于窗口的定位 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: wheat;
            display: flex;
            justify-content: center;
            align-items: center;
            /* 列 */
            flex-direction: column;
            /* 在他执行opacity 的时候也有一个加载动画 */
            transition: opacity 0.5s;
        }
        /* 白色的条 */
        .pageLoading .loading{
            width: 200px;
            height: 8px;
            background-color: white;
            border-radius: 5px;
            /* 调整距离 */
            margin-top: 50px;
            /* 控制增长的进度条 */
            overflow: hidden;
        }
        .pageLoading .loading .bar{
            /* 这个里面的进度条跟外面的一样的 初始是 0 */
            width: 0%;
            height: 100%;
            background-color: tomato;
        }
        .pageLoading.complete{
            /* 透明度 不透明0.5 */
            opacity: 0;
        }
        /* monster 旋转一圈 */
        .pageLoading.complete .monster{
            /* 动画执行的时间 */
            transition: 0.5s;
            /* 缩小 旋转 */
            transform: scale(0.1) rotateZ(360deg);
        }
    </style>
</head>
<body>
    <!-- 这是第二个界面看到的内容 -->
    <div>
        <!-- 文字部分 -->
        <h2>Hello 
            <br>Adger
        </h2>      
        <h3>I want you to be better</h3>
    </div>
    <!-- 第一个怪物 -->
    <div>
        <!-- 眼睛部分 -->
        <div>
            <!-- 眼球部分 -->
            <div></div>
        </div>
        <!-- 嘴巴部分 -->
        <div></div>
    </div>

    <!-- 第二个怪物部分 -->
    <div class="monster blue">
        <!-- 眼睛部分 -->
        <div>
            <!-- 眼球部分 -->
            <div></div>
        </div>
        <!-- 嘴巴部分 -->
        <div></div>
    </div>

    <!-- loading加载动画 这个div覆盖到那些div之上 -->
    <div>
        <!-- 第三个怪物部分 -->
    <div>
        <!-- 眼睛部分 -->
        <div>
            <!-- 眼球部分 -->
            <div></div>
        </div>
        <!-- 嘴巴部分 -->
        <div></div>
    </div>

    <!-- loading加载 上面的条-->
    <div>
        <!-- 在里面一直跑的条 -->
        <div></div>
    </div>
    </div>

    <script>
        var per = 0;
        // 不断的让width += 1 每隔 30 毫秒就加等于 1
        var time;
        console.log(time)
        time = setInterval(function() {
            $(".bar").css("width",per + "%")
           // 每次一进来 就加等于 1 
           per += 1; 
           // 如果 width > 100 了 就停下来 展示 
           if(per > 100){
               // 当大于 100的 时候 给pageLoading 加一个class类名透明度变透明 complete不能加点 然后清除时间
               $(".pageLoading").addClass('complete');
               // 当大于 100的 时候 monsterText 慢慢展示
               setTimeout(function () {
                   $(".monsterText").html("<h2>I am adger</h2>") 
               },3000);
              clearInterval(time);  
           }
        },30);
    </script>
</body>
</html>


评论