一步一步用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