html + css实现等待页面动画效果，附部分属性解析

最新推荐文章于 2024-06-02 02:52:36 发布

做只努力的小咸鱼

最新推荐文章于 2024-06-02 02:52:36 发布

阅读量2.1k

点赞数 8

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_52340302/article/details/116722655

版权

在逛B站时发现一些up主的小特效，此处记录下来，并对知识点做些解析

特效如下

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="./css/style.css">
		<title></title>
	</head>
	<body>
		<div class="loading">
			<span>Waiting...</span>
		</div>
	</body>
</html>

css代码

body {
	margin: 0;
	padding: 0;
	background: #34495e;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading {
	width: 200px;
	height: 200px;
	border-top: 10px solid #e74c3c;
	border-radius: 50%;
	box-sizing: border-box;
	position: relative;
	animation: a1 2s linear infinite;
}

.loading::before, .loading::after {
	content: '';
	width: 200px;
	height: 200px;
	box-sizing: border-box;
	border-radius: 50%;
	/* background-color: #E74C3C; */
	position: absolute;
	left: 0px;
	top: -8px;
}

.loading::before {
	border-top: 10px solid yellow;
	transform: rotate(120deg);
}

.loading::after {
	border-top: 10px solid royalblue;
	transform: rotate(240deg);
}

.loading span {
	position: absolute;
	text-align: center;
	color: #fff;
	width: 200px;
	height: 200px;
	line-height: 180px;
	animation: a2 2s linear infinite;
}

@keyframes a1{
	to{
		transform: rotate(360deg);
	}
}

@keyframes a2{
	to{
		transform: rotate(-360deg);
	}
}

box-sizing：

在一般情况下，我们并没有设置box-sizing属性，这个时候会默认为标准模式，即box-sizing: content-box

这是从Chrome上来看的具体图片

在这里插入图片描述

当你给div添加width/height时，他们的值指的仅是content内容区域的值，也就是图中的蓝色区域

此时盒模型的总宽度/高度=width/height+padding+border+margin

怪异模式
也叫怪异盒模型，与标准模式不同的是，它

width/height = 内容区宽度/高度 + padding + border

.box{
    width:100px;
    height:100px;
    border:10px #ddd solid;
    padding:10px;
    margin:10px;
    box-sizing:border-box;
}

在这里插入图片描述

此时盒子的总宽/高 = width/height + margin
图中不难看出width = border(10+10) + padding(10+10) + content(60)=100
盒子的总宽高 = width(100) + margin(10+10) = 120

animation：

语法格式：
animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

名称和时间自行定义
定义动画以何种运行轨迹完成一个周期，以下是几个常用值：

（1）linear:表示动画从头到尾的速度都是相同的。

（2）ease-in:表示动画以低速开始。

（3）ease-out:表示动画以低速结束。

（4）ease-in-out:表示动画以低速开始和结束。

设置动画在开始前的延迟时间：

默认是0，也可以自行定义，单位可为(s) 和 (ms)

动画播放次数,属性有两种：

（1）自行设置播放的次数。
（2）infinite：设置动画无线循环播放。

是否轮流反向播放动画

默认值是normal，动画正常播放。
 可设置的属性值：
（1）reverse:表示动画反向播放。
（2）alternate:表示动画在奇数次播放时为正向播放，为偶数次播放时为反向播放。
（3）alternate-reverse: :表示动画在奇数次播放时为反向播放，为偶数次播放时为正向播放。

定义元素动画结束以后或者未开始的元素样式：

（1）forwards:表示动画结束后，元素直接接使用当前样式。

（2）backwards:表示在动画延迟时间元素使用关键帧中from的属性值或者to属性值（当animation-direction为reverse或者alternate-reverse时）

举例：

animation:move 1s ease 2s 3 alertnate forwards

transform:

基本语法：

transform: rotate | scale | skew | translate |matrix;

旋转 rotate():
只对原元素进行一次2D旋转，rotate()括号里填写要旋转的角度，正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(120deg)；
移动 translate
1. translate(x,y),它表示对象进行平移，以元素中心点为基点，按照设定的x,y参数值,当值为正数时，右方移动物体，为负时反向移动，如transform:translate(10px,10px):
2. translateX ：通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):
3. translateY：通过给定Y方向的数目指定一个translation。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。如：transform:translateY(20px):
缩放 scale
1. scale，cale(X,Y)是用于对元素进行缩放，括号中的X,Y对应元素坐标轴的X轴和Y轴，基点也是元素的中心点，但X，Y为大于1时，元素放大，小于1则缩小，若括号中只有一个值，则表示X，Y轴方向的缩放倍数一样。
2. scaleX：scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2)。
3. scaleY：scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。如transform:scaleY(2)。
扭曲 skew
1. skew(): 即指XY轴上的斜切变换，括号内可填写两个参数，分别对应X,Y轴，如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切，写法可为：transform:skew(30deg,30deg);
2. skewX() ：按给定的角度沿X轴指定一个斜切变换。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。写法可为：transform:skewX(30deg)
  3.skewY() ：按给定的角度沿Y轴指定一个斜切变换。skewY是使元素以其中心为基点，并在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。写法可为：transform:skewY（30deg）

做只努力的小咸鱼

关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html + css实现等待页面动画效果，附部分属性解析

HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="./css/style.css"> <title></title> </head> <body> <div class="loading"> <span>Waiting.
复制链接

扫一扫