我在浏览器 ie9 上的元素中遇到了一些问题，同时使用 CSS3 创建微调器圆圈旋转时它不起作用。对于 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 中检查过它是正确的。
最佳答案
添加这个标签，这将帮助您在 IE9 中显示您的网页。
<meta http-equiv="X-UA-Compatible" content="IE=9">
关于html - CSS3 微调圆圈旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38116795/