loading图怎么写css,css3 加载loading图标实现
就是这样的一个css3实现。
加载效果.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);}
}
对，代码就是这么简单。
厉害不？
就是这样的一个css3实现。加载效果 .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);} } 对，代码就是这么简单。 厉害不？