CSS3微调器圆旋转答案

【问题标题】：CSS3 Spinner Circle RotationCSS3微调器圆旋转
【发布时间】：2016-11-02 04:14:22
【问题描述】：

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

  <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 中检查了它是否正确。

【问题讨论】：

标签： html css spinner

【解决方案1】：

添加此标签，这将帮助您在 IE9 中显示您的网页。

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

【讨论】：