让我来详细讲解一下“CSS实现一个简单loading动画效果”的完整攻略。
1. 利用CSS动画实现loading效果
CSS动画提供了一种简单又流畅的方式来实现loading效果,我们可以利用CSS3的@keyframes
关键字结合transform
属性和animation
属性来创建一个简单的loading效果。
1.1 创建loading图形
首先,我们需要创建出我们要实现的loading图形。这里我以一个圆形旋转的图形为例,代码如下:
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
.spinner {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.dot1,
.dot2 {
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 19px;
border: 2px solid #333;
border-radius: 50%;
animation: spinner 2s linear infinite;
}
.dot2 {
animation-delay: -1s;
left: -19px;
}
@keyframes spinner {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
我们将.spinner
设置为居中,宽高为40px,然后创建两个小圆点.dot1
和.dot2
,利用border
属性画出它们的形状,设置左右两边的位置并利用animation
属性启动动画效果。
1.2 创建动画
接下来,我们需要创建旋转动画效果。这里我们使用@keyframes
关键字创建一个名为spinner
的动画,关键帧包括三个,分别为0%、50%、100%。代码如下:
@keyframes spinner {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
这个动画会从0%开始,将圆点的大小逐渐缩小到0,然后在50%时达到最大尺寸,再在100%时回到初始状态。
1.3 完成CSS代码
最后,把创建好的loading图形和动画效果结合起来。我们把.dot1
和.dot2
的animation
属性设置为spinner
,时间为2s,线性变化,并设置其无限循环。代码如下:
.dot1,
.dot2 {
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 19px;
border: 2px solid #333;
border-radius: 50%;
animation: spinner 2s linear infinite;
}
.dot2 {
animation-delay: -1s;
left: -19px;
}
这样,我们就完成了一个简单的CSS loading动画效果。
2. 其他实现loading效果的方式
除了CSS动画之外,还有一些其他的方式可以实现loading效果。以下是两种基于JavaScript的实现示例:
2.1 利用setInterval和canvas绘制
这种方式需要利用canvas HTML元素,用JavaScript在canvas上绘制loading图形,并且用setInterval函数来不断刷新图形。代码如下:
<canvas id="loading"></canvas>
var canvas = document.getElementById('loading'),
context = canvas.getContext('2d'),
pointCount = 12,
width = 200,
height = 200,
i = 0,
angle = 0;
function draw() {
context.clearRect(0, 0, width, height);
angle += Math.PI / 6;
for (i = 0; i < pointCount; ++i) {
context.beginPath();
var x = 100 + Math.cos(angle + i * Math.PI / 6) * 50;
var y = 100 + Math.sin(angle + i * Math.PI / 6) * 50;
context.arc(x, y, 5, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = '#333';
context.fill();
}
}
setInterval(draw, 100);
2.2 利用jQuery插件
如果你想用一种更加简便的方式,也可以使用基于jQuery的插件。比如,我们可以用jquery-loading插件来实现这个效果。代码如下:
<div id="loading"></div>
$('#loading').loading();
以上就是“CSS实现一个简单loading动画效果”的攻略,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS实现一个简单loading动画效果 - Python技术站