css3 加载loading图标实现
2018-06-27 本文已影响97人
无迹落花
就是这样的一个css3实现。
<!DOCTYPE html>
<html>
<head>
<title>加载效果</title>
<style type="text/css">
.loading{
width: 30px;
height: 30px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #BEBEBE;
border-left: 3px solid #fff;
animation: load 1s linear infinite;
-moz-animation:load 1s linear infinite;
-webkit-animation: load 1s linear infinite;
-o-animation:load 1s linear infinite;
}
@-webkit-keyframes load
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes load
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes load
{
from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>
对，代码就是这么简单。
厉害不？
