Question

我尝试使用HTML和CSS创建在悬停时向任何方向辍学的图像。

它的意思是：

没有悬停：显示图像的一部分
悬停：图像的剩余部分滑出（以CSS指定的方向）

我尝试过做的事情：

<div>以保持background-image在某个高度切断并在悬停时使用css动画滑出

<html>
<body>
<style>
    @-webkit-keyframes resize {
        0% {
        }
        100% {
            height: 446px;
        }
    }

    #pic {
        height: 85px;
        width: 500px;
        background-image: url(http://images5.fanpop.com/image/photos/31400000/Cow-cows-31450227-500-446.jpg);
    }

    #pic:hover {
        -webkit-animation-name: resize;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-delay: 0.5s;
        -webkit-animation-direction: normal;
        -webkit-animation-fill-mode: forwards;
    }
</style>
<div id="pic"></div>
<p class="center">Hover over me</p>
</body>
</html>

这种方法的问题在于，这会将其他内容移出我不想要的方式。如果我想将图像向左或向右或向上滑动，这种方法也不起作用。

有什么建议吗？

Answer 1

我把你的代码放在小提琴上，为你准备了几个例子：

向下移动：http://jsfiddle.net/rcCeP/
向上移动：http://jsfiddle.net/rcCeP/1/
向右移动：http://jsfiddle.net/rcCeP/2/
向左移动：http://jsfiddle.net/rcCeP/3/ 为了好玩：
来自中心：http://jsfiddle.net/rcCeP/4/
在文档流程中：http://jsfiddle.net/rcCeP/5/（注意具有相对定位的xtra包装器）
我将如何操作，使用转换而不是动画，在两个方向上工作并在旧浏览器上优雅地降级：http://jsfiddle.net/rcCeP/6/

我可以整天这样继续下去，这真的很有趣......

防止内容被推送的关键是使图片位置绝对。这将使其脱离文档流。然后方向就变成了一个玩位置和背景位置值的问题。

希望这有帮助！

是否可以使用css下拉/左/右/上图像

1 个答案: