Question

我在浏览器ie9上的项目中遇到了一些问题，同时使用CSS3创建旋转圆周旋转它不起作用。对于ie9，我在css3中使用了ms transform属性

＆＃13;

  <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>

＆＃13;

<!DOCTYPE html>
  <div class="main">
    <div class="slice">
      <div data-loader="satellite"></div>
      <div>data-loader="satellite"</div>
    </div>

＆＃13;

它不能正常工作。但是我已经检查过它正确的问题。

Answer 1

添加此标记，这将有助于您在IE9中显示您的网页。

<meta http-equiv="X-UA-Compatible" content="IE=9">

CSS3 Spinner Circle Rotation

1 个答案: