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

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

css

是否可以使用css下拉/左/右/上图像,css,Css,我正在尝试创建图像，当鼠标悬停在上面时，这些图像将在任何方向上消失，只使用HTML和CSS 它的意思是什么：未悬停：显示图像的一部分悬停：图像的剩余部分滑出（按CSS指定的方向）我试着做的是：一个来保存背景图像，该图像在一定高度处截断，并在悬停时使用css动画滑出 <html> <body> <style> @-webkit-keyframes resize { 0% { } 100% {

我正在尝试创建图像，当鼠标悬停在上面时，这些图像将在任何方向上消失，只使用HTML和CSS

它的意思是什么：

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

我试着做的是：

一个

来保存

背景图像

，该图像在一定高度处截断，并在悬停时使用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>


@-webkit关键帧调整大小{
0% {
}
100% {
高度：446px；
}
}
#图片{
高度：85px；
宽度：500px；
背景图片：url(http://images5.fanpop.com/image/photos/31400000/Cow-cows-31450227-500-446.jpg);
}
#图：悬停{
-webkit动画名称：调整大小；
-webkit动画持续时间：1s；
-webkit动画迭代计数：1；
-webkit动画延迟：0.5s；
-webkit动画方向：正常；
-webkit动画填充模式：正向；
}
将鼠标悬停在我身上

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

有什么建议吗？

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

下移：
上移：
右移：
向左移动：为了好玩：
从中心开始：
在文档流中：（注意带有相对位置的xtra包装器）
我将如何做，用过渡代替动画，在两个方向上工作，并在较旧的浏览器上优雅地降级：

我可以像这样坚持一整天，这真的很有趣

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

希望这有帮助

旁注：在你的身体里放置一个样式标签是不合法的，应该在你的脑袋里（或者更好，在一个链接的样式表中）谢谢！这帮了大忙。如果可以的话，我会投赞成票，但我不能：（@alexyw.Do检查一下我添加的最后一个，我认为这应该是继续进行的方式