css3ajax跨浏览器加载
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3ajax跨浏览器加载相关的知识,希望对你有一定的参考价值。
CSS3 Ajax Loading Animation========
This is a simulation for the popular gif animated images. The reason why i choose to do it in css3 is the flexibility of re-using it in different sizes, different colors and the transparency issues in gif animated loaders.
Enjoy it ;)
--------
[Mohamed](http://seniorwebdesigner.com/ "My Portfolio")
Twitter: [@MohammedAlaa](http://twitter.com/MohammedAlaa "@MohammedAlaa on Twitter")
<div class="spinner"> </div> <style type="text/css"> div.spinner { position: relative; width: 14px; height: 14px; display: inline-block; top: 2px; left: 0; } .big_btn div.spinner {width: 24px; height: 24px} div.spinner div { width: 11%; height: 26%; background: #B3CFE6; position: absolute; left: 44.5%; top: 37%; opacity: 0; -webkit-animation: spinner-fade 1s linear infinite; -webkit-border-radius: 50px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2); } div.spinner div.bar1 { -webkit-transform:rotate(0deg) translate(0, -142%); -moz-transform:rotate(0deg) translate(0, -142%); -o-transform:rotate(0deg) translate(0, -142%); -ms-transform:rotate(0deg) translate(0, -142%); transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } div.spinner div.bar2 { -webkit-transform: rotate(30deg) translate(0, -142%); -moz-transform: rotate(30deg) translate(0, -142%); -o-transform: rotate(30deg) translate(0, -142%); -ms-transform: rotate(30deg) translate(0, -142%); transform: rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s; -moz-animation-delay: -0.9167s; -ms-animation-delay: -0.9167s; -o-animation-delay: -0.9167s; animation-delay: -0.9167s; } div.spinner div.bar3 { -webkit-transform: rotate(60deg) translate(0, -142%); -moz-transform: rotate(60deg) translate(0, -142%); -o-transform: rotate(60deg) translate(0, -142%); -ms-transform: rotate(60deg) translate(0, -142%); transform: rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s; -moz-animation-delay: -0.833s; -ms-animation-delay: -0.833s; -o-animation-delay: -0.833s; animation-delay: -0.833s; } div.spinner div.bar4 { -webkit-transform: rotate(90deg) translate(0, -142%); -moz-transform: rotate(90deg) translate(0, -142%); -o-transform: rotate(90deg) translate(0, -142%); -ms-transform: rotate(90deg) translate(0, -142%); transform: rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s; -moz-animation-delay: -0.75s; -ms-animation-delay: -0.75s; -o-animation-delay: -0.75s; animation-delay: -0.75s; } div.spinner div.bar5 { -webkit-transform: rotate(120deg) translate(0, -142%); -moz-transform: rotate(120deg) translate(0, -142%); -o-transform: rotate(120deg) translate(0, -142%); -ms-transform: rotate(120deg) translate(0, -142%); transform: rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s; -moz-animation-delay: -0.667s; -ms-animation-delay: -0.667s; -o-animation-delay: -0.667s; animation-delay: -0.667s; } div.spinner div.bar6 { -webkit-transform: rotate(150deg) translate(0, -142%); -moz-transform: rotate(150deg) translate(0, -142%); -o-transform: rotate(150deg) translate(0, -142%); -ms-transform: rotate(150deg) translate(0, -142%); transform: rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s; -moz-animation-delay: -0.5833s; -ms-animation-delay: -0.5833s; -o-animation-delay: -0.5833s; animation-delay: -0.5833s; } div.spinner div.bar7 { -webkit-transform: rotate(180deg) translate(0, -142%); -moz-transform: rotate(180deg) translate(0, -142%); -o-transform: rotate(180deg) translate(0, -142%); -ms-transform: rotate(180deg) translate(0, -142%); transform: rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s; -moz-animation-delay: -0.5s; -ms-animation-delay: -0.5s; -o-animation-delay: -0.5s; animation-delay: -0.5s; } div.spinner div.bar8 { -webkit-transform: rotate(210deg) translate(0, -142%); -moz-transform: rotate(210deg) translate(0, -142%); -o-transform: rotate(210deg) translate(0, -142%); -ms-transform: rotate(210deg) translate(0, -142%); transform: rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s; -moz-animation-delay: -0.41667s; -ms-animation-delay: -0.41667s; -o-animation-delay: -0.41667s; animation-delay: -0.41667s; } div.spinner div.bar9 { -webkit-transform: rotate(240deg) translate(0, -142%); -moz-transform: rotate(240deg) translate(0, -142%); -o-transform: rotate(240deg) translate(0, -142%); -ms-transform: rotate(240deg) translate(0, -142%); transform: rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s; -moz-animation-delay: -0.333s; -ms-animation-delay: -0.333s; -o-animation-delay: -0.333s; animation-delay: -0.333s; } div.spinner div.bar10 { -webkit-transform: rotate(270deg) translate(0, -142%); -moz-transform: rotate(270deg) translate(0, -142%); -o-transform: rotate(270deg) translate(0, -142%); -ms-transform: rotate(270deg) translate(0, -142%); transform: rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s; -moz-animation-delay: -0.25s; -ms-animation-delay: -0.25s; -o-animation-delay: -0.25s; animation-delay: -0.25s; } div.spinner div.bar11 { -webkit-transform: rotate(300deg) translate(0, -142%); -moz-transform: rotate(300deg) translate(0, -142%); -o-transform: rotate(300deg) translate(0, -142%); -ms-transform: rotate(300deg) translate(0, -142%); transform: rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s; -moz-animation-delay: -0.1667s; -ms-animation-delay: -0.1667s; -o-animation-delay: -0.1667s; animation-delay: -0.1667s; } div.spinner div.bar12 { -webkit-transform: rotate(330deg) translate(0, -142%); -moz-transform: rotate(330deg) translate(0, -142%); -o-transform: rotate(330deg) translate(0, -142%); -ms-transform: rotate(330deg) translate(0, -142%); transform: rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s; -moz-animation-delay: -0.0833s; -ms-animation-delay: -0.0833s; -o-animation-delay: -0.0833s; animation-delay: -0.0833s; } @-webkit-keyframes spinner-fade { from {opacity: 1;} to {opacity: 0.25;} } </style>
以上是关于css3ajax跨浏览器加载的主要内容,如果未能解决你的问题,请参考以下文章