Created
January 22, 2017 06:41
-
-
Save zhuzhuaicoding/df71018663b44b37d4383a6661cfdd5e to your computer and use it in GitHub Desktop.
加载动画,3个小长方形块,一个一个变大,抖动那样子
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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> |
Author
zhuzhuaicoding
commented
Jan 22, 2017
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment