本文主要是介绍仿写css小项目(超简单)——加载动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
从B站上看到的小项目，炫酷又简单。
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>Document</title><!-- 引用 --><link rel="stylesheet" href="style.css">
</head><body><div class="loader"><span></span><span></span><span></span><h2>Loading...</h2></div>
</body></html>CSS模块：
* {/* 清除默认边距 */margin: 0;padding: 0;/* box-sizing: border-box;元素的总高度和宽度包含内边距和边框(padding 与 border) : */box-sizing: border-box;
}body {/* display: flex; 弹性布局*/display: flex;/*justify-content: center;表示居中排列 */justify-content: center;/* 居中对齐弹性盒的各项 <div> 元素： */align-items: center;/* 设置背景颜色 */background-color: rgb(79, 80, 87);/* 设置段落的最小高度 */min-height: 100vh;
}.loader {/* position的属性之一：relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。 */position: relative;width: 200px;height: 200px;display: flex;justify-content: center;align-items: center;
}.loader span {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* */border: 2px solid skyblue;pointer-events: none;/* 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state; */animation: animate 5s linear infinite;
}/* 这里的椭圆数值 用到的网址：https://mdbootstrap.com/docs/standard/tools/design/fancy-border-radius/*/.loader span:nth-child(1) {border-radius: 44% 56% 58% 42% / 52% 49% 51% 48%;
}.loader span:nth-child(2) {animation-direction: reverse;border-radius: 73% 27% 20% 80% / 40% 33% 67% 60%;
}.loader span:nth-child(3) {animation-duration: 3s;border-radius: 42% 58% 64% 36% / 66% 33% 67% 34%;
}@keyframes animate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}.loader h2 {color: skyblue;font-family: consolas;font-weight: 500;box-shadow: 2px 0 0 #fff;/* 将超出的部分进行隐藏 */overflow: hidden;/* 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state; */animation: textTyping 3s linear infinite;
}/*定义动画，keyframe是关键帧，里面的百分比要是整数 */@keyframes textTyping {0% {width: 0px;}20% {width: 131.96px;}
}这篇关于仿写css小项目(超简单)——加载动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
