一步一步用CSS3实现简单的Loading动画效果

最新推荐文章于 2024-04-23 16:06:33 发布

全栈开发工程师大潘

最新推荐文章于 2024-04-23 16:06:33 发布

阅读量720

点赞数

分类专栏： web前端文章标签： css3 loading

本文链接：https://blog.csdn.net/qq_27528315/article/details/45131657

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一步一步用CSS3实现简单的Loading动画效果

基本思路

用css3实现一个深灰色的圆环
把圆环上四分之一的颜色变成蓝色
让圆环转起来

现在开搞了

html标签很简单，就一句

<div class="loader"></div>

2.加点无关紧要的css，让loader显示在页面中间，顺便加点背景色，方便我们调试

body{
    background: #a0a0a0;
}

.loader{
    margin: 100px auto 0;
}

3.把.loader这个div变成一个方框

/*为了和刚才那些没用的css区分开来，不要混到一起影响视线，
单独写在一个选择器里面*/
.loader{
    border: solid 10px #ddd;
    height: 120px;
    width: 120px;
}

4.添加一个css3的属性border-radius，方框就变成个圆环了

.loader{
    border: solid 10px #ddd;
    /*这一步的重点在这里*/
    border-radius: 50%;
    height: 120px;
    width: 120px;
}

5.让圆环的四分之一变成蓝色

.loader{
    border: solid 10px #ddd;
    /*这一行是新加的*/
    border-left-color: #167ede;
    border-radius: 50%;
    height: 120px;
    width: 120px;
}

5.让这个圈转起来

.loader{
    border: solid 10px #ddd；
    border-left-color: #167ede;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    /*这一行是新加的*/
    -webkit-animation: simple-loader 1.1s infinite linear;
}
@-webkit-keyframes simple-loader{
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

目前这chrome浏览器下面，这个loading效果就制作完成了

6.做下浏览器兼容性问题，下面是完整的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的Loading动画</title>
<style type="text/css">
body{
    background: #a0a0a0;
}

.loader{
    margin: 100px auto 0;
}

/*为了和刚才那些没用的css区分开来，不要混到一起影响视线，
单独写在一个选择器里面*/
.loader{
    border: solid 12px #ddd;
    border-left-color: #167ede;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    -webkit-animation: simple-loader 1.1s infinite linear;
    animation: simple-loader 1.1s infinite linear;
}

@-webkit-keyframes simple-loader{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes simple-loader{
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
    <div class="loader"></div>
</body>
</html>

前端技术交流QQ群： 73895824

全栈开发工程师大潘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一步一步用CSS3实现简单的Loading动画效果

一步一步用CSS3实现简单的Loading动画效果基本思路用css3实现一个深灰色的圆环把圆环上四分之一的颜色变成蓝色让圆环转起来现在开搞了html标签很简单，就一句<div class="loader"></div>
复制链接

扫一扫