软件教程 2025年08月6日
0 收藏 0 点赞 291 浏览 645 个字
摘要 :

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

最近有个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>

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

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.zuozi.net/5801.html

管理员

相关推荐
2025-08-06

文章目录 一、Promise基础回顾 二、Promise 与 axios 结合使用场景及方法 (一)直接返回 axios …

269
2025-08-06

文章目录 一、模块初始化时的内部机制 二、常见导出写法的差异分析 (一)写法一:module.exports…

107
2025-08-06

文章目录 一、ResizeObserver详解 (一)ResizeObserver是什么 (二)ResizeObserver的基本用法 …

683
2025-08-06

文章目录 一、前期准备工作 (一)下载相关文件 (二)安装必要工具 二、处理扣子空间生成的文件…

338
2025-08-06

文章目录 一、官方文档 二、自动解包的数据类型 ref对象:无需.value即可访问 reactive对象:保持…

371
2025-08-06

文章目录 一、Hooks的工作原理 二、在if语句中使用Hook会出什么岔子? 三、React官方的Hook使用规…

843
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:08:00-23:00

客服QQ

122325244

客服电话

400-888-8888

客服邮箱

122325244@qq.com

扫描二维码

关注微信客服号