Question

对不起，我没有关于此的更多信息，但我根本不知道它是什么。我被要求复制一些其他设计，这些设计是用旧技术编写的，但没有给出这方面的来源，只是一个例子。

我认为他们做他们的方式是2张图片，当它悬停时会切换到另一张带有更多阴影的图像。

有没有办法用css中的图像执行此操作：https://i.imgur.com/k7oBR7g.gifv

Answer 1

希望这会对你有所帮助

img:hover {
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.5);
    transform: translate(-2px,-2px);
}

Answer 2

这可以通过图像简单地实现，将图像放在一个块中并在悬停时为它们设置动画。像：

<强> HTML

<div class="imgblk">
   <img src="img1" class="img">
   <img src="img2" class="img">
   <img src="img3" class="img">
</div>

<强> CSS

.imgblk 
{ 
   /* style the image block as per your design */ 
}
.imgblk img 
{ 
   width:150px; 
   height:150px; 
   object-fit:cover: 
   transition:all ease .3s;
   display:inline-block:
   margin-right:5px;
}
.imgblk img:hover 
{
   transform: translate(-1px, -3px);
   box-shadow: 0px 2px 5px 0px #333;
}

或者更好的方法，使用font-awesome（http://fontawesome.io/icons/）等图标代替图片

希望这会对你有所帮助。

在CSS中动画图像？

2 个答案: