网站建设用php建设优点/自助优化排名工具

今天做项目的时候，一个loading加载动画，让我搞了很长时间，后来ui给了看了一个loading加载源码，仿照着源码，把样式改了一下，成功了，并且通过ui给的链接，发现里面有很多优秀的源码可以借鉴，这是加载动画的源码，loading加载动画，

这是自己封装的html部分

{/* 登录时loading加载动画 */}
<div className="login-loader-wrap" ><div className="loader"></div><span>登录中</span>
</div>

这是css部分，

//登录loading加载动画
.login-loader-wrap {.loader {position: absolute;top: 40%;border-top: 0.3em solid rgba(0, 0, 0, 0.1);border-right: 0.3em solid rgba(0, 0, 0, 0.1);border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);border-left: 0.3em solid #ee2223;-moz-transform: translateZ(0);-webkit-transform: translateZ(0);transform: translateY(40%);-moz-animation: loader 600ms infinite linear;-webkit-animation: loader 600ms infinite linear;animation: loader 600ms infinite linear;-moz-transition: all 600ms ease;-o-transition: all 600ms ease;-webkit-transition: all 600ms ease;transition: all 600ms ease;z-index: 9999;}.loader,.loader:after {border-radius: 50%;width: 2em;height: 2em;}> span {position: absolute;top: 45%;margin-left: -7px;font-weight: 400;font-size: 14px;color: #595959;}
}@-webkit-keyframes loader {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);border-left: 0.3em solid #ee2223;}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);border-left: 0.3em solid #fc4c2f;}
}
@-moz-keyframes loader {0% {-moz-transform: rotate(0deg);transform: rotate(0deg);border-left: 0.3em solid #ee2223;}100% {-moz-transform: rotate(360deg);transform: rotate(360deg);border-left: 0.3em solid #fc4c2f;}
}
@keyframes loader {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);border-left: 0.3em solid #ee2223;}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);border-left: 0.3em solid #fc4c2f;}
}

最终的效果，

 需要注意的是，css样式有一部分没有传全，自己自行修改定位position属性，

 另外给大家推荐一下这个网站，

jquery源码在线运行

 一些样式，我们只需要好好的修改一下源码就可以了。