CSS3自定义loading效果
效果:
使用CSS3完成loading的制作
css样式:
<style type="text/css"> .mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); } .mask-loading { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); } .mask-loading div { width: 20px; height: 20px; float: left; margin-right: 5px; background-color: #0179B5; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .mask-loading div:nth-child(1) { -webkit-animation: loading 0.5s ease 0s infinite alternate; animation: loading 0.5s ease 0s infinite alternate; } .mask-loading div:nth-child(2) { -webkit-animation: loading 0.5s ease 0.1s infinite alternate; animation: loading 0.5s ease 0.1s infinite alternate; } .mask-loading div:nth-child(3) { margin-right: 0; -webkit-animation: loading 0.5s ease 0.2s infinite alternate; animation: loading 0.5s ease 0.2s infinite alternate; } @keyframes loading { from { /*缩放*/ transform: scale(1); background-color: lightcoral; } to { transform: scale(0.5); background-color: #0179B5; } } @-webkit-keyframes loading { from { transform: scale(1); background-color: lightcoral; } to { transform: scale(0.5); background-color: #0179B5; } } @-moz-keyframes loading { from { transform: scale(1); background-color: lightcoral; } to { transform: scale(0.5); background-color: #0179B5; } } @-o-keyframes loading { from { transform: scale(1); background-color: lightcoral; } to { transform: scale(0.5); background-color: #0179B5; } } </style>
HTML:
<body> <div class="mask"> <div class="mask-loading"> <div></div> <div></div> <div></div> <p>Loading...</p> </div> </div> </body>