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

Question

我正在尝试使用仅使用 HTML 和 CSS 创建将在悬停时向任何方向退出的图像。

它的意思是：

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

我试过做什么：

a<div>保持 abackground-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>

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

有什么建议么？

score 2 · Accepted Answer

我将您的代码放在小提琴上，并为您制定了一些示例：

下移：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 - 是否可以使用css下拉/左/右/上图像

1 回答 1

Related

Reference