鼠标移上去会进行一个平移并切换图片的效果

桃扇骨 2022-04-23 15:24 242阅读 0赞

首先，为了能明显的看出来平移以后的距离，我们设置一个边框，把需要做出效果的div放入里面；先设置边框的div左右居中，上边距为100px，高为500px，宽800px，然后设置边框10px，样式设为一个好看一点的蓝色边框，边框设置完以后，我们再给包裹的div设置左右居中，上边距为50px，使它在边框里面上下左右都居中，再给它的宽高都设为400px，再放一个背景图片，然后再设置一下圆角为100%，并且给它一个5px蓝色的阴影效果，让它看起来像一面镜子，  
效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]

完成这一步以后，我们给它一个伪类，然后一张设置你移动以后想要切换的图片，并且调动一下那张图片的位置，以免看不到完整的图片，再给它设置让右平移100px的距离，再给它移动的一个时间，这样就能清楚的看到平移的过程，：

完整的代码截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]

全部都设置完成以后，我们就可以实现效果了，当我们把鼠标放到图片上时，图片就会自动向右边平移100px,并且在平移的过程中切换成你放的那张图片：

移动以后的效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]  
从截图中我们可以看到，图片很明显的向右平移了，并且还切换了图片（此时还没完全平移完成，所以还可以看到原来图片的残影）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220226/bde4e7dab92347d582ab831f9093fc47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220226/a540e270b6fc43829d10587798e0fee1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220226/6f9d6940091c4a96801d3abbd5ac597e.png