Question

我希望在使用:target定位图片时为其设置动画。但问题是我的图片标签位于div标签内，所以我无法定位img。我怎么能这样做或者如果可能的话？或者，如果还有其他方法可以做到这一点？

这是我的HTML

<div id="f">
                <img src="images/fan.png">
                <span><h1 style="text-align: center; font-size: 6em; padding: 10px;">Fan</h1></span>
            </div>

这就是我目前正在尝试做的事情

@keyframes  zomeIn{
     from{width: 50px; height: 50px;}
     to{width: 150px; height: 150px;}
 }
:target{

    animation-name: zomeIn;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    display: block !important;
}

Answer 1

您可以使用#f:target img选择目标div内的图像。然后，当您单击定位该div的锚点时，动画将在图像上播放。

这是一个实例：

＆＃13;

@keyframes zomeIn {
    from {
        width: 50px;
        height: 50px;
    }
    to {
        width: 150px;
        height: 150px;
    }
}
#f:target img {
    animation-name: zomeIn;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    display: block !important;
}

＆＃13;

<div id="f">
  <img src="http://i.imgur.com/LDR6AWn.png?1" width="150" height="150">
</div>

<a href="#f">Animate</a>

＆＃13;

JSFiddle版本：https://jsfiddle.net/v77m1tod/

动画图像标记：目标

1 个答案: