用css和HTML做loding小动画

最新推荐文章于 2024-02-15 09:15:57 发布

逾期不予

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量219

点赞数

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/m0_49681744/article/details/107730482

版权

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

逾期不予

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css和HTML做loding小动画

用css和HTML做loding小动画1、先进行简单的页面布局1.1我这里是使用了一个div标签包了两个p标签每个p标签里面又包了四个span标签构建了一个简单的页面搭建其余的用css就可以进行下一步操作了<body> <div> </s
复制链接

扫一扫