Question

我有两个图像，我发现css ::在将一个图像保持在另一个图像之上非常好，即使屏幕尺寸发生变化。问题是我希望下面的图像旋转，顶部的图像保持静止。我似乎无法做到这一点，我甚至不确定这是否可能使用:: after。有办法吗？

这是我的代码：

    .box {
      display: inline-block;
      position: fixed;
      top: 50%; 
      left: 30%;
        -webkit-animation-name: spinnerRotate;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: spinnerRotate;
        -moz-animation-duration: 5s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: spinnerRotate;
        -ms-animation-duration: 5s;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
    }

   .box:after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        top: 25px;
        right: 0;
        bottom: 0;
        left: 25px;
        background: url("../Content/images/top.png");
    }   

<div class="box">
    <img src="../Content/images/bottom.png">
</div>

这是动画：

 @-webkit-keyframes spinnerRotate
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(720deg);}
}
@-moz-keyframes spinnerRotate
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(720deg);}
}
@-ms-keyframes spinnerRotate
{
    from{-ms-transform:rotate(0deg);}
    to{-ms-transform:rotate(720deg);}
}

Answer 1

嗯，你可以这样做：

 @keyframes rotate {
    0% {
       transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }


.box::after {
  animation: rotate 5s infinite;
  content:url("http://lorempixel.com/sports/400/200/");
}

<div class="box">
  <img src="http://lorempixel.com/g/400/200/">
</div>

我使用background-image属性更改了您的content。这不是必需的，但更舒适，因为您不需要提供图像尺寸。

这是一篇关于css动画的好文章：https://css-tricks.com/almanac/properties/a/animation/
以下是有关兼容性的信息：http://caniuse.com/#search=animation

如何在另一张图像下旋转图像？

1 个答案: