纯原生——旋转的加载效果1

红目香薰

发布于 2023-10-11 10:04:25

1340

发布于 2023-10-11 10:04:25

文章被收录于专栏：CSDNToQQCode

锦集目标：

很多孩子在初学计算机的时候是各种没有兴趣，所以很多教研方向都定在了可视化的方向上，为了更加直接的能体现出编码以及实现的效果，故而将课程内容初设都定在了H5上，对应的H5就得很多种能让孩子们有兴趣学习的方案，本锦集的目的就在于让孩子们能直接通过自己的编码看到执行后的效果，从基础的效果开始，难度逐级递增，让孩子们在时时刻刻的成就感中掌握基础的超文本编辑语言的编码，当孩子们有兴趣学习后再进行C语言C++等语言的输入，能在这个学习的过程中尽量的让孩子们少掉队。

锦集资源

资源都上传到了InsCode中，每篇文章都会让大家看到效果，有效果转出编码，有目的的去学习，减少学习中孩子们音没有兴趣所导致的放弃心理，孩子们，加油，程序员的一小步，人类的一大步。

环境需求

计算机系统：win7以上使用工具：VS Code 测试浏览器：360浏览器(极速模式，360的极速模式相当于谷歌浏览器)

如果浏览器版本太老就算了啊。不玩IE6。

直接点击右上角的Run查看效果即可，加载过程不慢，稍后就能直接看效果。

项目结构

Index代码

这里我选用的是外部引入，如果要纯dom操作的话可以用js强行写入，但是没必要。

<!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>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="show"></div>
</body>
</html>

CSS代码

主要的代码是动画效果，其中rotate是旋转的度数，deg是旋转度数的单位。第一篇文章，我说一下这里的通配符，我使用margin:0px auto;这样可以让div容器直接居中，因为第一个0px是代表上部距离，auto代表左右宽度自动，这样就直接能看到居中的效果了。 animation是使用动画，其中的infinite是循环执行，所以我们能看到一直旋转的效果。

*{
    margin: 0px auto;
    padding: 0px;
}
.show{
    width: 500px;
    height: 500px;
    border:50px solid #02c2e5;
    background-color: transparent;
    border-radius: 50%;
    position: relative;
    top: 100px;
    animation: round 1s infinite;
}
.show::before{
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
}
@keyframes round {
    0%{rotate: 0deg;}
    100%{rotate: 360deg;}
}

大致这样，但是是动态的。