常见的loading图标,大概的样子是这样:(录制的gif,比较卡)
看到大牛的面试中被问到这个问题,我就想自己动手实现一下。我们来用20行代码实现一下。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>加载效果</title>
<style type="text/css">
.loading{
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid #BEBEBE;
border-left: 5px solid #498aca;
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-t