用css和HTML做loding小动画

1、先进行简单的页面布局
1.1
我这里是使用了一个div标签包了两个p标签
每个p标签里面又包了四个span标签
构建了一个简单的页面搭建

其余的用css就可以进行下一步操作了

<body><div><p><span></span><span></span><span></span><span></span></p><p><span></span><span></span><span></span><span></span></p></div></body>

2、使用css样式实现效果
2.1
下面的是详细的书写css样式和解析
篇幅有点长详细解释了每一步的操作写完之后建议整体浏览一遍

<style type=\"text/css\">/* 使用通配符进行所用标签去除默认的margin 和 padding样式 */* {margin: 0;padding: 0;}/* 给整个body加了一个黑色的背景颜色（加不加都可） */body {background: black;}/* 这里给div标签设定了宽高各200px，给了一个页面 左右居中 上间距给了200px  ，给了一个相对定位*/div {width: 200px;height: 200px;margin: 200px auto;position: relative;}/* 这里给所有的p标签都设置了宽高200px ，给了一个绝对定位（这里给绝对定位  因为父元素有定位所以是根据父级元素 也就是div进行定位） */div p {width: 200px;height: 200px;position: absolute;}/* 这里给所有的span标签设置了基础样式 */p span {/* 将行内元素span转换成块元素使span标签支持设定宽高和一些其他css属性  */display: block;/* 宽高各40px   背景色为白色   文本居中  行高40px */width: 40px;height: 40px;background: white;text-align: center;line-height: 40px;/* 设定为圆角盒子  */border-radius: 50%;/* 这里调用下面的动画（tom） 过度时间为1s 匀速 循环 */animation: tom 1s linear infinite;/* 设定盒子阴影 水平方向0 垂直方向0 模糊度为3px 延伸半径为10px 阴影颜色为白色  */box-shadow: 0 0 3px 10px white;}/* 这里使用结构伪类选择器将span分别定位到到盒子p的四个角（注意：这里的定位也是根据父级p定位的  因为盒子p也给了定位）*/p span:nth-of-type(2) {position: absolute;right: 0;top: 0;}p span:nth-of-type(3) {position: absolute;right: 0;bottom: 0;}p span:nth-of-type(4) {position: absolute;left: 0;bottom: 0;}/* 这里选择第二个盒子p 使其旋转45度（rotate属性值 默认按照z轴旋转  单位是deg） */p:nth-of-type(2) {transform: rotate(45deg);}/* 定义动画关键帧  使用关键字@keyframes 名称{} 定义动画的关键帧这里在开始时为缩小到没有中间时从没有放大到正常结束时再次缩小到没有*/@keyframes tom {0% {transform: scale(0);}50% {transform: scale(1);}100% {transform: scale(0);}}/* 这里给每一个span标签 按照顺时针的方向设定了动画开始延迟由于给正数会在动画开始时影响动画效果这里给的负数  就不会出现页面刚打开会有个别不动的*//* 第一个p的  第一个span */p:nth-of-type(1) span:nth-of-type(1) {animation-delay: -0.12s;}/* 第二个p的  第一个span */p:nth-of-type(2) span:nth-of-type(1) {animation-delay: -0.23s;}/* 第一个p的  第二个span */p:nth-of-type(1) span:nth-of-type(2) {animation-delay: -0.34s;}/* 第二个p的  第二个span */p:nth-of-type(2) span:nth-of-type(2) {animation-delay: -0.45s;}/* 第一个p的  第三个span */p:nth-of-type(1) span:nth-of-type(3) {animation-delay: -0.56s;}/* 第二个p的  第三个span */p:nth-of-type(2) span:nth-of-type(3) {animation-delay: -0.67s;}/* 第一个p的  第四个span */p:nth-of-type(1) span:nth-of-type(4) {animation-delay: -0.78s;}/* 第二个p的  第四个span */p:nth-of-type(2) span:nth-of-type(4) {animation-delay: -0.89s;}</style>

感谢阅读！
如有错误的地方感谢指点。
下期写用css和HTML做出百叶窗的效果。