效果一
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- .zh-loading{
- position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);
- }
- .zh-loading ul{
- position: absolute;z-index: 2;left: 50%;top: 50%;height: 60px;overflow: hidden;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
- }
- .zh-loading ul li{
- float: left;height: 100%;width: 4px;margin: 0 2px;background-color: #ccc;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;
- }
- .zh-loading ul li:nth-of-type(2){
- -webkit-animation-delay: -1.1s;animation-delay: -1.1s;
- }
- .zh-loading ul li:nth-of-type(3){
- -webkit-animation-delay: -1.0s;animation-delay: -1.0s;
- }
- .zh-loading ul li:nth-of-type(4){
- -webkit-animation-delay: -0.9s;animation-delay: -0.9s;
- }
- @-webkit-keyframes stretchdelay{
- 0%, 40%, 100%{
- -webkit-transform: scaleY(0.4)
- }
- 20%{
- -webkit-transform: scaleY(1.0)
- }
- }
- @keyframes stretchdelay{
- 0%, 40%, 100%{
- transform: scaleY(0.4);-webkit-transform: scaleY(0.4);
- }
- 20%{
- transform: scaleY(1.0);-webkit-transform: scaleY(1.0);
- }
- }
效果二
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- <style type="text/css">
- @keyframes load{
- 0%{transform:rotate(0)}
- 100%{transform:rotate(-360deg)}
- }
- #load{width: 200px;height: 200px;animation:load 1s linear infinite; transform-origin:center center;}
- </style>
- <div id="load">
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" viewBox="0 0 200 200" xml:space="preserve">
- <g>
- <linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">
- <stop offset="0" style="stop-color:#4886CD"/>
- <stop offset="1" style="stop-color:#9DBFE4"/><!-- 蓝到浅蓝渐变 -->
- </linearGradient>
- <path fill="url(#right)" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!-- 右半圆环 -->
- <linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">
- <stop offset="0" style="stop-color:#FFFFFF"/>
- <stop offset="1" style="stop-color:#9DBFE4"/><!-- 浅蓝到白色渐变 -->
- </linearGradient>
- <path fill="url(#left)" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!-- 左半圆环 -->
- <circle fill="#4886CD" cx="100" cy="10" r="10"/>
- </g>
- </svg>
- </div>
效果三
- HTML
- <ul class="zh-loading"><li></li><li></li><li></li><li></li></ul>
- CSS
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
- .zh-loading{display: none;margin: 1rem auto 0;width: 34px;height: 34px;}
- .zh-loading li{float: left;width: 14px;height: 14px;margin: 2px 0 0 2px;background-color: #F2F2F2;}
- .zh-loading li:nth-of-type(1){-webkit-animation: loadingEffect 1s ease 1s infinite;-ms-animation: loadingEffect 1s ease 1s infinite;animation: loadingEffect 1s ease 1s infinite;}
- .zh-loading li:nth-of-type(2){-webkit-animation: loadingEffect 1s ease .25s infinite;-ms-animation: loadingEffect 1s ease .25s infinite;animation: loadingEffect 1s ease .25s infinite;}
- .zh-loading li:nth-of-type(3){-webkit-animation: loadingEffect 1s ease .75s infinite;-ms-animation: loadingEffect 1s ease .75s infinite;animation: loadingEffect 1s ease .75s infinite;}
- .zh-loading li:nth-of-type(4){-webkit-animation: loadingEffect 1s ease .5s infinite;-ms-animation: loadingEffect 1s ease .5s infinite;animation: loadingEffect 1s ease .5s infinite;}
- @-webkit-keyframes loadingEffect{
- to{background-color: #BCBCBC;}
- }
- @-ms-keyframes loadingEffect{
- to{background-color: #BCBCBC;}
- }
- @keyframes loadingEffect{
- to{background-color: #BCBCBC;}
- }
来源: http://www.jianshu.com/p/e0efa35b5e5c