用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做出百叶窗的效果。

用css和HTML做loding小动画相关推荐

python Turtle做一个小动画
详细代码功能在注解里面 import turtle #导入库 t = turtle.Pen() #创建一个Pen画笔 for i in range(0,4): #第一种方法画画使用fort.forw ...
Python 实现“嫦娥奔月“小动画，一起来看看这漂亮的嫦娥吧
目录源代码: 素材图片程序效果附录 tkinter Canvas 组件中秋节快要来了,"嫦娥奔月"是我国古代的一个美丽神话,它反映了古代人类祖先飞天和探索宇宙苍穹的梦想.现 ...
html设计动画小黄人,【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器
仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我 ...
css 语音,用css完成语音助手小动画
用css完成语音助手小动画 2020年08月10日 | 萬仟网IT编程 | 我要评论震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaro ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
CSS实现loading小动画
纯css实现loading动画相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了那么他是怎么实现的呢?其实通过一些简单的css技巧就可以实现啦! 首先双手奉上代码 <style&g ...
动画图标，如何实现页面中图标小动画，动画按钮 CSS JS
动画图标,如何实现页面中图标小动画,动画按钮 CSS JS 本文提到的例子的在线演示: https://kylebing.cn/test/scss/ 最近在看线上服务器的时候,无意间发现一个好玩的东西 ...
css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
scratch做简单跑酷游戏_Scratch（七）篇外.用小动画和触碰能做大型游戏？
有一些同学私信我,前几章节学会角色.舞台和动画,然后再加上第七章的触碰,这些看上去挺简单,但是普遍怀疑这些基础知识的实用性,都想快速进入到编程环节里面. 其实scratch编程不复杂,复杂的是各个基础 ...

用css和HTML做loding小动画

用css和HTML做loding小动画

用css和HTML做loding小动画相关推荐

最新文章

热门文章