网站常用效果加载中,css3实现加载效果
<style> /* loading */ #fountainG { position: relative; width: 240px; height: 29px; } #fountainG li {list-style:none; position: absolute; top: 0;/* background: #238d7b; 默认颜色 */ width: 29px; height: 29px; -moz-animation: bounce_fountainG 1.2s linear infinite; -moz-transform: scale(.3); -moz-border-radius: 19px; -webkit-animation: bounce_fountainG 1.2s linear infinite; -webkit-transform: scale(.3); -webkit-border-radius: 19px; -ms-animation: bounce_fountainG 1.2s linear infinite; -ms-transform: scale(.3); -ms-border-radius: 19px; -o-animation: bounce_fountainG 1.2s linear infinite; -o-transform: scale(.3); -o-border-radius: 19px; animation: bounce_fountainG 1.2s linear infinite; transform: scale(.3); border-radius: 19px; } #fountainG li:first-child { left: 0; -moz-animation-delay: 0.48s; -webkit-animation-delay: 0.48s; -ms-animation-delay: 0.48s; -o-animation-delay: 0.48s; animation-delay: 0.48s; } #fountainG li:nth-child(2) { left: 30px; -moz-animation-delay: 0.6s; -webkit-animation-delay: 0.6s; -ms-animation-delay: 0.6s; -o-animation-delay: 0.6s; animation-delay: 0.6s; } #fountainG li:nth-child(3) { left: 60px; -moz-animation-delay: 0.72s; -webkit-animation-delay: 0.72s; -ms-animation-delay: 0.72s; -o-animation-delay: 0.72s; animation-delay: 0.72s; } #fountainG li:nth-child(4) { left: 90px; -moz-animation-delay: 0.84s; -webkit-animation-delay: 0.84s; -ms-animation-delay: 0.84s; -o-animation-delay: 0.84s; animation-delay: 0.84s; } #fountainG li:nth-child(5) { left: 120px; -moz-animation-delay: 0.96s; -webkit-animation-delay: 0.96s; -ms-animation-delay: 0.96s; -o-animation-delay: 0.96s; animation-delay: 0.96s; } #fountainG li:nth-child(6) { left: 150px; -moz-animation-delay: 1.08s; -webkit-animation-delay: 1.08s; -ms-animation-delay: 1.08s; -o-animation-delay: 1.08s; animation-delay: 1.08s; } #fountainG li:nth-child(7) { left: 180px; -moz-animation-delay: 1.2s; -webkit-animation-delay: 1.2s; -ms-animation-delay: 1.2s; -o-animation-delay: 1.2s; animation-delay: 1.2s; } #fountainG li:nth-child(8) { left: 210px; -moz-animation-delay: 1.32s; -webkit-animation-delay: 1.32s; -ms-animation-delay: 1.32s; -o-animation-delay: 1.32s; animation-delay: 1.32s; } @-moz-keyframes bounce_fountainG { 0% { -moz-transform:scale(1); background-color:#238d7b; } 100% { -moz-transform:scale(.3); background-color:#FFFFFF; } } @-webkit-keyframes bounce_fountainG { 0% { -webkit-transform:scale(1); background-color:#238d7b; } 100% { -webkit-transform:scale(.3); background-color:#FFFFFF; } } @-ms-keyframes bounce_fountainG { 0% { -ms-transform:scale(1); background-color:#238d7b; } 100% { -ms-transform:scale(.3); background-color:#FFFFFF; } } @-o-keyframes bounce_fountainG { 0% { -o-transform:scale(1); background-color:#238d7b; } 100% { -o-transform:scale(.3); background-color:#FFFFFF; } } @keyframes bounce_fountainG { 0% { transform:scale(1); background-color:#238d7b; } 100% { transform:scale(.3); background-color:#FFFFFF; } } </style>
<div id="fountainG"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </div>
加载中纯css3实现效果,网站中比较常用!!
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/485
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!