css如何实现两张图片重叠,鼠标hover实现翻转的效果?

Web前端 潘老师 1年前 (2020-08-08) 1462 ℃ (0) 扫码查看

最近有个CSS效果的小需求,就是实现实现两张图片重叠在同一个位置,然后鼠标放在图片上就实现翻转成另一张图片,鼠标移出图片就反转为原来的图片,好了,先看看效果图:

css如何实现两张图片重叠,鼠标hover实现翻转的效果?

接下来,直接上代码(注意将照片地址换为自己的照片地址,一些css样式参数也可自行调整):

<!DOCTYPE html>
<html>
<head>
    <title>图片重叠反转案例</title>
    <style type="text/css">
        div{
            position: relative;
            margin: 100px auto;
            width: 224px;
            height: 224px;
        }
        div img{
            position: absolute;
            left: 0;
            top: 0;
            transition: all 2s;
        }
               div img:first-child{
            z-index: 1;
            backface-visibility: hidden;
        }
        div:hover img{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="https://www.panziye.com/wp-content/uploads/2020/08/2020080501135121.png"/>
        <img src="https://www.panziye.com/wp-content/uploads/2020/08/2020080501112542.png"  />
    </div>
</body>
</html>

看代码是不是很简单,好了,直接拿去用吧!


版权声明:本站所有文章,如无特殊说明,均为本站原创。全部下载资源版权归原作者所有。任何个人或组织,若未征得本站同意,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。若需转载请注明文章来源。
本文链接:css如何实现两张图片重叠,鼠标hover实现翻转的效果?
喜欢 (3)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】

您也可以 微信登录 来发表评论!