css loading页面的实现

最新推荐文章于 2024-08-31 08:12:40 发布

世纪殇

最新推荐文章于 2024-08-31 08:12:40 发布

阅读量262

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/dasgk/article/details/103135173

版权

网页专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		dot {
			/* dot标签 inline-block 表示可以与其他元素在一行。
			 * em指的是相对长度，相对单位长度指定了一个长度相对于另一个长度的属性
			 * vertical-align 垂直对齐，vertical-align属性默认为baseline，baseline意味着元素的基线通父元素的基线对齐，父元素的基线为字母x的下边缘
			 * line-height 的值为数字时，表示的相对于 font-size 的倍数，但问题在于，font-size:100px 对应的文字在不同字体里的高度是不一样的！ 
			 */
		    display: inline-block; 
		    height: 1em;
		    line-height: 1;
		    text-align: left;
		    vertical-align: -.25em;
		    overflow: hidden;
		}
		dot::before {
		    display: block;
		    content: '...\A..\A.'; /*表示的是换行,这里的意思是 第一行3个点 第二行两个点 第三行是一个点*/
		    /*
		     *  white-space: nowrap   文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
		     * 				 pre       空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 
		     * 				 pre-wrap  保留空白符序列，但是正常地进行换行。
		     * 				 normal    默认。空白会被浏览器忽略。    
		    */
		    white-space: pre-wrap;
		    /**
		     * dot是绑定的keyframes的名字 3s执行完成一次 ， infinite无限循环
		     * animate动画是连续的，但是我们这儿是一帧一帧的，一卡一卡的，不是那么连续的效果，用到step-start。
		     * both：设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态。
		     */
		    animation: dot 3s infinite step-start both;
		}
		@keyframes dot {
			/*
			 * translateY()函数表示在页面垂直移动元素. 
			 */
		    33% { transform: translateY(-2em); }
		    66% { transform: translateY(-1em); }
		}
	</style>
</head>
<body>
	正在加载中<dot>...</dot>
</body>
</html>