css动画----loading加载动画

今天做项目的时候，一个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源码在线运行

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

css动画----loading加载动画相关推荐

CSS - 实现Loading加载动画
Loading加载动画用CSS都用实现一个loading的加载动画通过控制 item-loader-container 来实现显示及隐藏 <div class="item-load ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
android 载入svg动画,实例讲解使用SVG制作loading加载动画的方法
今天和大家分享一个以SVG图像为主的loading加载动画,现在移动端网页使用比较多,若还用GIF做loading图片的话,可能会影响图像的质量,所以使用SVG是一个不错的方式. 这次展示的代码由 A ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
CSS齿轮转动加载动画
CSS齿轮转动加载动画前言:该动画主要流程分为三块:绘制齿轮,齿轮转动动画,出场动画绘制齿轮绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderO ...
直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
Css3+jquery 实现loading加载动画
一.Css3+jquery 实现loading加载动画这是一个 Loading 加载demo 不需要图片纯html和css 实现样式以下是html css以及js的代码需要自取 <!DO ...

css动画----loading加载动画

css动画----loading加载动画相关推荐

最新文章

热门文章