标签：play tran com blog pat inner 加载 title for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="preloader_1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <style media="screen"> #preloader_1{ margin: 300px; position:relative; } #preloader_1 span{ display:block; bottom:0px; width: 9px; height: 5px; background:#9b59b6; position:absolute; animation: preloader_1 1.5s infinite ease-in-out; } #preloader_1 span:nth-child(2){ left:11px; animation-delay: .2s; } #preloader_1 span:nth-child(3){ left:22px; animation-delay: .4s; } #preloader_1 span:nth-child(4){ left:33px; animation-delay: .6s; } #preloader_1 span:nth-child(5){ left:44px; animation-delay: .8s; } @keyframes preloader_1 { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;} 50% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} } </style> </body> </html>
效果二
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="preloader_2"> <span></span> <span></span> <span></span> <span></span> </div> <style media="screen"> #preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; } #preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; } #preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; } #preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; } #preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; } #preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; } @keyframes preloader_2_1 { 0% { -transform: translateX(0px) translateY(0px) rotate(0deg); webkit-transform:translateX(0px) translateY(0px) rotate(0deg); border-radius:0px; } 50% { -transform: translateX(-20px) translateY(-10px) rotate(-180deg); webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px; background:#3498db; } 80% { -transform: translateX(0px) translateY(0px) rotate(-360deg); webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px; } 100% { -transform: translateX(0px) translateY(0px) rotate(-360deg); webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px; } } @keyframes preloader_2_2 { 0% { -transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px; } 50% { -transform: translateX(20px) translateY(-10px) rotate(180deg); border-radius:20px; background:#f1c40f; } 80% { -transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px; } 100% { -transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px; } } @keyframes preloader_2_3 { 0% { -transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px; } 50% { -transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px; background:#2ecc71; } 80% { -transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px; } 100% { -transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px; } } @keyframes preloader_2_4 { 0% { -transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px; } 50% { -transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px; background:#e74c3c; } 80% { -transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px; } 100% { -transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px; } } </style> </body> </html>
效果三
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="preloader_3"></div> <style media="screen"> #preloader_3{ margin: 300px; position:relative; } #preloader_3:before{ width:20px; height:20px; border-radius:20px; background:blue; content:‘‘; position:absolute; background:#9b59b6; animation: preloader_3_before 1.5s infinite ease-in-out; } #preloader_3:after{ width:20px; height:20px; border-radius:20px; background:blue; content:‘‘; position:absolute; background:#2ecc71; left:22px; animation: preloader_3_after 1.5s infinite ease-in-out; } @keyframes preloader_3_before { 0% {transform: translateX(0px) rotate(0deg)} 50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;} 100% {transform: translateX(0px) rotate(0deg)} } @keyframes preloader_3_after { 0% {transform: translateX(0px)} 50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;} 100% {transform: translateX(0px)} } </style> </body> </html>
效果四
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> <style media="screen"> .spinner { margin: 100px auto 0; width: 150px; text-align: center; } .spinner > div { width: 30px; height: 30px; background-color: #67CF22; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } </style> </body> </html>
效果五
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="spinner"> <div class="double-bounce1"></div> <div class="double-bounce2"></div> </div> <style media="screen"> .spinner { width: 60px; height: 60px; position: relative; margin: 100px auto; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #67CF22; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2.0s infinite ease-in-out; animation: bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } </style> </body> </html>
标签：play tran com blog pat inner 加载 title for
原文地址：http://www.cnblogs.com/sunnychen/p/6679435.html
