Skip to content

Instantly share code, notes, and snippets.

@zhuzhuaicoding
Created January 22, 2017 06:41
Show Gist options
  • Save zhuzhuaicoding/df71018663b44b37d4383a6661cfdd5e to your computer and use it in GitHub Desktop.
Save zhuzhuaicoding/df71018663b44b37d4383a6661cfdd5e to your computer and use it in GitHub Desktop.
加载动画,3个小长方形块,一个一个变大,抖动那样子
//css
#loading{
position: fixed;
width: 40px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -20px;
margin-top: -10px;
}
@-webkit-keyframes uil-facebook {
0% {
-webkit-transform: scale(2);
transform: scale(2);
}
90% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.uil-facebook-css {
background: none;
position: relative;
width: 140px;
height: 140px;
}
.uil-facebook-css > div {
position: absolute;
width: 10px;
height: 20px;
top: 0px;
left: 0px;
background: #ff6600;
opacity: 0.6;
-webkit-animation: uil-facebook 1s cubic-bezier(0.01, 0.73, 0.28, 0.93) infinite;
animation: uil-facebook 1s cubic-bezier(0.01, 0.73, 0.28, 0.93) infinite;
}
.uil-facebook-css > div:nth-of-type(2) {
left: 15px;
opacity: 0.8;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.uil-facebook-css > div:nth-of-type(3) {
left: 30px;
opacity: 0.9;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
//html
<div id="loading" class="uil-facebook-css"><div></div><div></div><div></div></div>
@zhuzhuaicoding
Copy link
Author

qq 20170122144217

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment