Rumah > Artikel > hujung hadapan web > CSS3如何实现页面加载效果

CSS3如何实现页面加载效果

清浅asal: 2018-11-29 13:54:174265semak imbas

CSS3实现页面加载效果的方法：首先创建一个HTML示例文件；然后在body中创建一个div；最后通过animation动画和transform中的2D缩放转换共同实现页面加载效果即可。

CSS3如何实现页面加载效果

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

对于页面加载的动画我们可以做成不同形状的效果，今天要分享的案例是将动画做成圆形的形状来加载页面，在使用动画时要注意浏览器兼容问题

知识点详解

（1）animation：设置动画属性

animation-name ：设置需要绑定到选择器的 keyframe 名称。本例绑定的是load

animation-duration :完成动画所需花费的时间，以秒或毫秒为单位。

animation-timing-function：动画的速度曲线。

animation-delay：在动画开始之前的延迟。

animation-iteration-count：动画应该播放的次数。

animation-direction：是否应该轮流反向播放动画。

例：设置动画名为load,完成动画所需时间为1.4s，以低速开始和结束，无限循环播放

animation: load 1.4s infinite ease-in-out;

（2）animation-fill-mode 属性

none ：不改变默认行为。

forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both：向前和向后填充模式都被应用。

（3）transform ：scale(x,y) 2D 缩放转换。

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.load {
  margin:300px auto;
  width: 150px;
  text-align: center;
}
.load div{
  width: 30px;
  height: 30px;
  background-color:rgb(118,224,250);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: load 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;

}
.load .circle1 {
  -webkit-animation-delay: -0.32s;
}
.load .circle2 {
  -webkit-animation-delay: -0.16s;
}
@-webkit-keyframes load {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
</style>
</head>
<body>
<div class="load">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</body>
</html>

【推荐课程：CSS3教程】

效果图

未标题-1.jpg

动态效果图

总结：以上就是本篇文章的全部内容了，通过这篇文章的内容希望大家对CSS3动画有一定的了解，可以做出自己喜欢的页面加载样式。

Atas ialah kandungan terperinci CSS3如何实现页面加载效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css3 html count 循环 function 选择器 transform animation

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css中focus选择器有什么用Artikel seterusnya：如何设置Grid Layout （网格布局）列的最小宽度

Artikel berkaitan

Lihat lagi