CSS3微調器圓旋轉
[英]CSS3 Spinner Circle Rotation
問題描述
使用CSS3創建微調器圓旋轉時，在瀏覽器ie9上的項目中出現了一些問題，它不起作用。 對於ie9，我在css3中使用了ms transform屬性
<style> body { background-color: #ed5565; } .main { width: 60em; margin: 0 auto; } .slice { position: relative; float: left; width: 14em; height: 6em; margin: .5em; padding: 2em; text-align: center; border: 1px solid rgba(0, 0, 0, .5); } .slice > div { margin: 1em auto; } .slice > div:nth-child(2) { font-family: cursive; position: absolute; bottom: 0; left: 3em; color: #fff; } [data-loader='satellite'] { position: relative; width: 48px; height: 48px; animation: satellite 3s infinite linear; border: 1px solid #fff; border-radius: 100%; } [data-loader='satellite']:before, [data-loader='satellite']:after { position: absolute; left: 0; width: 15px; height: 15px; content: ''; border-radius: 100%; background-color: #fff; -webkit-box-shadow: 0 0 10px #fff; -ms-box-shadow:0 0 10px #fff; box-shadow: 0 0 10px #fff; } [data-loader='satellite']:after { right: 0; width: 24px; height: 24px; margin: 12px; } @-webkit-keyframes satellite { from { -webkit-transform: rotate(0) translateZ(0); -ms-transform: rotate(0) translateZ(0); -o-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); } to { -webkit-transform: rotate(360deg) translateZ(0); -ms-transform: rotate(360deg) translateZ(0); -o-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); } } @-moz-keyframes satellite { from { -webkit-transform: rotate(0) translateZ(0); -ms-transform: rotate(0) translateZ(0); -o-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); } to { -webkit-transform: rotate(360deg) translateZ(0); -ms-transform: rotate(360deg) translateZ(0); -o-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); } } @-o-keyframes satellite { from { -webkit-transform: rotate(0) translateZ(0); -ms-transform: rotate(0) translateZ(0); -o-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); } to { -webkit-transform: rotate(360deg) translateZ(0); -ms-transform: rotate(360deg) translateZ(0); -o-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); } } @keyframes satellite { from { -webkit-transform: rotate(0) translateZ(0); -ms-transform: rotate(0) translateZ(0); -o-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); } to { -webkit-transform: rotate(360deg) translateZ(0); -ms-transform: rotate(360deg) translateZ(0); -o-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); } } @-ms-keyframes satellite { from { -webkit-transform: rotate(0) translateZ(0); -ms-transform: rotate(0) translateZ(0); -o-transform: rotate(0) translateZ(0); transform: rotate(0) translateZ(0); -moz-transform: rotate(0) translateZ(0); } to { -webkit-transform: rotate(360deg) translateZ(0); -ms-transform: rotate(360deg) translateZ(0); -o-transform: rotate(360deg) translateZ(0); transform: rotate(360deg) translateZ(0); -moz-transform: rotate(360) translateZ(0); } } } </style>
<!DOCTYPE html> <div class="main"> <div class="slice"> <div data-loader="satellite"></div> <div>data-loader="satellite"</div> </div>
它不起作用。 但是我已經檢查了chrome的正確性。
1 個解決方案
解決方案1
0 2016-06-30 12:11:00
添加此標簽，這將幫助您在IE9中顯示您的網頁。
<meta http-equiv="X-UA-Compatible" content="IE=9">
CSS3旋轉快照
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.