css加载更多动画效果,css3实现loading动画效果

通过css3动画实现三种loading加载动画

效果1：通过css3的border-radius与transform的rotate()实现

效果2：通过css3动画animation的animation-delay为负值，则直接从该时间状态进行动画的功能来实现

效果3：通过伪元素::bofore与::after,当animation过渡动画类型为ease时border重叠效果实现

body {

margin: 0px;

/*background: black;*/

}

.loading {

width: 100px;

height: 100px;

margin: 50px auto;

border: 8px solid #333;

border-left: 8px solid red;

border-radius: 100px;

-moz-animation: 2s loadings linear infinite;

-webkit-animation: 2s loadings linear infinite;

-ms-animation: 2s loading linear infinite;

animation: 2s loadings linear infinite;

}

@-webkit-keyframes loadings {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

@-moz-keyframes loadings {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

@-ms-keyframes loadings {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

@keyframes loadings {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

.loading1 {

margin: 0 auto;

text-align: center;

font-size: 0;

}

.loading1 .item {

display: inline-block;

margin-right: 5px;

width: 5px;

height: 45px;

background-color: #000;

}

.loading1 .loading-item1 {

-moz-animation: loading-animation 1.2s ease infinite;

-webkit-animation: loading-animation 1.2s ease infinite;

animation: loading-animation 1.2s ease infinite;

}

.loading1 .loading-item2 {

-moz-animation: loading-animation 1.2s ease -1.1s infinite;

-webkit-animation: loading-animation 1.2s ease -1.1s infinite;

animation: loading-animation 1.2s ease -1.1s infinite;

}

.loading1 .loading-item3 {

-moz-animation: loading-animation 1.2s ease -1.0s infinite;

-webkit-animation: loading-animation 1.2s ease -1.0s infinite;

animation: loading-animation 1.2s ease -1.0s infinite;

}

.loading1 .loading-item4 {

-moz-animation: loading-animation 1.2s ease -0.9s infinite;

-webkit-animation: loading-animation 1.2s ease -0.9s infinite;

animation: loading-animation 1.2s ease -0.9s infinite;

}

.loading1 .loading-item5 {

-moz-animation: loading-animation 1.2s ease -0.8s infinite;

-webkit-animation: loading-animation 1.2s ease -0.8s infinite;

animation: loading-animation 1.2s ease -0.8s infinite;

}

@-webkit-keyframes loading-animation {

0%,

40%,

100%{

-webkit-transform: scaleY(0.5);

}

20% {

-webkit-transform: scaleY(1);

}

@-moz-keyframes loading-animation {

0%,

40%,

100%{

-moz-transform: scaleY(0.5);

}

20% {

-moz-transform: scaleY(1);

}

@-ms-keyframes loading-animation {

0%,

40%,

100%{

-ms-transform: scaleY(0.5);

}

20% {

-ms-transform: scaleY(1);

}

@keyframes loading-animation {

0%,

40%,

100%{

transform: scaleY(0.5);

}

20% {

transform: scaleY(1);

}

.loading3 {

position: relative;

margin: 0 auto;

width: 100px;

height: 100px;

border: 5px solid red;

border-radius: 50%;

}

.loading3::before {

content: "";

position: absolute;

display: inline-block;

top: -5px;

left: -5px;

width: 50px;

height: 100px;

border-radius: 150px 0 0 150px;

border-left: 5px solid black;

border-bottom: 5px solid black;

border-top: 5px solid black;

-webkit-transform-origin: 60px 60px;

-moz-transform-origin: 60px 60px;

-ms-transform-origin: 60px 60px;

transform-origin: 55px 55px;

-webkit-animation: loading3 4s ease infinite -3s;

-moz-animation: loading3 4s ease infinite -3s;

-ms-animation: loading3 4s ease infinite -3s;

animation: loading3 4s ease infinite -3s;

}

.loading3::after {

content: "";

position: absolute;

display: inline-block;

top: -5px;

left: 50px;

width: 50px;

height: 100px;

border-radius: 0 150px 150px 0;

border-top: 5px solid black;

border-right: 5px solid black;

border-bottom: 5px solid black;

-webkit-transform-origin: 0;

-moz-transform-origin: 0;

-ms-transform-origin: 0;

transform-origin: 0;

-webkit-animation: loading3 4s ease infinite;

-moz-animation: loading3 4s ease infinite;

-ms-animation: loading3 4s ease infinite;

animation: loading3 4s ease infinite;

}

@-webkit-keyframes loading3 {

0%{

-webkit-transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

}

@-moz-keyframes loading3 {

0%{

-moz-transform: rotate(0);

}

100% {

-moz-transform: rotate(360deg);

}

@-ms-keyframes loading3 {

0%{

-ms-transform: rotate(0);

}

100% {

-ms-transform: rotate(360deg);

}

@keyframes loading3 {

0%{

transform: rotate(0);

}

100% {

transform: rotate(360deg);

}

css加载更多动画效果,css3实现loading动画效果相关推荐

js实现上拉加载更多
先贴代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
android 加载更多动画效果,Android实践之带加载效果的下拉刷新上拉加载更多
前言之前写的一个LoadingBar,这次把LoadingBar加到下拉刷新的头部.从头写一个下拉刷新,附赠上拉加载更多.下面话不多说了,来一起看看详细的介绍吧. 效果图: 实现过程首先是自定义属 ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
html顺序进场动画,十六种炫酷纯css加载动画（一）
一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...
css 加载动画如何生效,CSS 加载动画
CSS加载动画实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...
android 刷新某条数据_Android 支持刷新、加载更多、带反弹效果的RecyclerView
点击上方"Android技术杂货铺",选择"标星" 干货文章,第一时间送达! 开篇当前市面上很多支持刷新.加载更多RecyclerView开源库,为何我这里还 ...
JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
android listview下拉刷新动画,android 安卓 listview 支持下拉刷新上拉加载更多
[1]重写listViewimport java.text.SimpleDateFormat; import java.util.Date; import com.example.testdddlea ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...

css加载更多动画效果,css3实现loading动画效果

css加载更多动画效果,css3实现loading动画效果相关推荐

最新文章

热门文章