BIT 前端训练营 | 20211227作业2 之实现loading...动画

最新推荐文章于 2024-06-17 09:39:50 发布

titi子柚

最新推荐文章于 2024-06-17 09:39:50 发布

阅读量120

点赞数

分类专栏：百度前端训练营文章标签：前端动画 css

本文链接：https://blog.csdn.net/qq_43248263/article/details/122214839

版权

百度前端训练营专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现loading…动画

思路：

画个正方形box
令相邻两个边框颜色变成蓝色
border-radius：50%把正方形变成圆形
添加animation属性让它转起来

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>loading</title>
    <head>
        <style>
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh; /* 100%,没有元素也会被撑开*/
            }
            .loading{
                max-width: 30%;
                line-height: 1.4;
                font-size: 1.2rem;
                text-align: center;
                font-weight: bold;
            }
            .loading__author{
                color: darkgray;
                font-size: 1rem;
                display: block; /*将inline元素span变成块级元素,让其独占一行*/
                margin-bottom: 30px;
            }
            .loading__anim{
                width: 35px;
                height: 35px;
                display: inline-block;
                /*将inline元素span变成行内块级元素，若变成块级元素block，独占一行，
                宽度与父级元素一致，导致方块不会在中间*/
                border: 5px solid rgba(189,189,189 ,0.25); /*灰色5px元素的边框*/
                border-left-color: dodgerblue; /*让两边边框颜色变成蓝色*/
                border-top-color:dodgerblue;/*让两边边框颜色变成蓝色*/
                border-radius: 50%;
                animation: ro 600ms linear infinite;
                /*linear这个单词不要写错了!!血泪教训！！！！！*/
            }
            /*Safari and Chrome要加上-webkit-*/
            @keyframes ro {
                0%{
                    -webkit-transform:rotate(0deg);
                }
                25%{
                    -webkit-transform:rotate(90deg);
                }
                50%{
                    -webkit-transform:rotate(180deg);
                }
                75%{
                    -webkit-transform:rotate(270deg);
                }
                100%{
                    -webkit-transform:rotate(360deg);
                }              
            }
        </style>

    </head>
    <body>
        <section class="loading">
        <p>For new sidebar colors, click your workspace name, then     Preferences > Sidebar > Theme</p>
        <span class="loading__author">- Your friends at Slack</span>
        <span class="loading__anim"></span>
        </section>
    </body>
    
</html>

titi子柚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BIT 前端训练营 | 20211227作业2 之实现loading...动画

实现loading…动画思路：画个正方形box令相邻两个边框颜色变成蓝色border-radius：50%把正方形变成圆形添加animation属性让它转起来<!DOCTYPE html><html lang="en"> <meta charset="utf-8" /> <title>loading</title> <head> <style>
复制链接

扫一扫