CSS制作首页loading 动画
程序员文章站
2024-01-17 22:02:52
...
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>loading 动画</title>
<style type="text/css">
.loading {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-justify-content: center;
}
.loading img {
width: 50px;
height: 50px;
display: block;
margin: 0;
position: relative;
/*
animation 属性是一个简写属性，用于设置六个动画属性：
1、animation-name 需要绑定到选择器的 keyframe 名称
2、animation-duration 完成动画所花费的时间，以秒或毫秒计
3、animation-timing-function 动画的速度曲线。
linear 动画从头到尾的速度是相同的、
ease 默认。动画以低速开始，然后加快，在结束前变慢、
ease-in 动画以低速开始、
ease-out 动画以低速结束、
ease-in-out 动画以低速开始和结束、
4、animation-delay 动画开始之前的延迟
5、animation-iteration-count 动画应该播放的次数
n 播放次数
infinite无限次播放
6、animation-direction 是否应该轮流反向播放动画
normal 默认值。动画应该正常播放
alternate 动画应该轮流反向播放
*/
-webkit-animation: spin 1s linear 1s 5 alternate;
animation: spin 1s linear infinite;
}
/*
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
*/
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="load" class="loading">
<img src="./img/Loading.png">
</div>
</body>
</html>
效果：
再Angular中添加首页loading动画：
index.html 文件的app-root 之间添加style 和html代码， angular会在页面加载完成后将app-root之间的代码都移除掉
上一篇： HTML 点击复制