|
日時: 2013/02/16 06:05
名前: lightbox
|
IE10 の @keyframes
http://msdn.microsoft.com/ja-jp/library/ie/hh772747.aspx
拡張子:
<style type="text/css">
@-webkit-keyframes ajax-loader-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes ajax-loader-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes ajax-loader-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.ajax-loader {
margin: 150px;
opacity: .8;
display: block;
border-radius: 50%;
font-size: 129px;
width: .25em;
height: .25em;
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
-webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
-moz-animation: .85s ajax-loader-rotate steps(8) infinite;
animation: .85s ajax-loader-rotate steps(8) infinite;
}
</style>
<div class="ajax-loader"></div>
http://one-div.com/
|