如何在网页加载的过程中使用loading动画
发布网友
发布时间：2022-04-22 04:34
共2个回答
懂视网
时间：2022-04-28 17:09
小伙伴们在浏览网站时有没有遇到页面“loading中，请稍后”的情况，作为前端工程师，你会用CSS制作页面加载（loading）动画效果吗？这篇文章给大家分享一个富有创意的页面加载（loading）动画代码，有一定的参考价值，感兴趣的朋友可以看看。
制作一个富有创意的页面加载（loading）动画需要用到很多CSS中的属性，比如：animation动画，transform属性等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 CSS视频教程。
实例描述：用div制作一个富有创意的正方形loading页面效果，在加载过程中，正方形沿Y轴翻转，又沿X轴翻转，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.spinner {
width: 60px;
height: 60px;
background-color: #67CF22;
margin: 100px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}
50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}
100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>效果如图所示：
以上给大家分享了一个富有创意的正方形加载（loading）页面效果代码，比较简单，初学者可以自己动手实践，看看能不能实现页面加载的动画效果，希望这篇文章对你有所帮助！
【相关教程推荐】
1. CSS3视频教程
2. HTML视频教程
3. bootstrap教程
热心网友
时间：2022-04-28 14:17
打开软件，新建300*300的画布，分辨率为72，画布颜色选择为白色
2
在左侧矢量工具中，提供许多造型，选择“面圈形”
3
在画布中画一个200*200的造型，大小可在下方的属性面板里调整
4
鼠标点击造型，点击其中的黄点可以进行调节造型，如图所示
END
渐变效果
1
在下方的属性栏中选择添加渐变效果，这里使用“线性”渐变，左侧颜色填充为白色
2
可以进行适当的调整，可以适当的调整渐变中的透明度，如图所示
3
再绘制一个小圆，当做面圈头，如图所示，为的是转动起来有效果
END
动画效果
1
在菜单栏中选择“修改”-->“动画”-->"选择动画"
2
在“选择动画”中进行设置，点击“确定”，这里选择建立20个状态，这个动画效果就做好了
END
保存GIF
1
点击“文件”菜单中的“图像预览”
2
在格式里选择GIF动画，点击导出，loading动画就做好了
