在本教程中，我们将看到如何仔细堆叠CSS中的两个图像可以为快速“之前”和“之后”图像效果让路，从而将鼠标移动到图像容器上会剥离一个图像以显示另一个图像。
您可能已经看到过使用JavaScript之前实现过这样的效果，尽管在CSS3这个勇敢的新世界中，一点创造力还有很长的路要走。
将鼠标移到下面的图像上：
上面的演示包括“之前”和“之后”图像，两者之间的唯一区别是墙的颜色。 这样的图像是以这种方式堆叠在一起并以这种方式观看的很好的候选者，通过戏剧性地突出它们之间的不同之处。
标记和CSS
让我们从前/后效果的标记开始，它包括一个外部容器和两个内部DIV，分别容纳两个图像：
HTML标记
<div class =“beforeandafter”>
<div class =“before”>
<img src =“wallbefore.jpg”/>
</ DIV>
“div class =”在“>之后
<img src =“wallafter.jpg”/>
</ DIV></ DIV>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2651609/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
一个纯CSS前后图像效果（2）
请登录后发表评论
登录
全部评论
