html中hover属性拓展鼠标放置在图片上出现二维码

最新推荐文章于 2022-11-05 22:01:06 发布

Booom007

最新推荐文章于 2022-11-05 22:01:06 发布

阅读量4.9k

点赞数 3

文章标签： hover 二维码

本文链接：https://blog.csdn.net/Booom007/article/details/81203493

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            margin-top: 200px;
            margin-left: 200px;
            width: 200px;
            height: 200px;
        }

        .weixin {
            position: relative;
        }

        .weixin img.qrcode {
            position: absolute;
            z-index: 99;
            top: -200px;
            right: -40px;
            width: 7.5rem;
            max-width: none;
            height: 7.5rem;
            transform: scale(0);
            transform-origin: top right;
            opacity: 0;
            border: .3125rem solid #0085ba;
            border-radius: .25rem;
            -webkit-transition: all .4s ease-in-out;
            -o-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;

        }

        .weixin:hover img.qrcode {
            transform: scale(1);
            opacity: 1;
        }
    </style>
</head>
<body>
<div>
    <a class="weixin" href="http://www.baidu.com">
        <img src="./img/优酷.webp" alt="微信二维码">
        <img class="qrcode" src="./img/优酷二维码.jpg" alt="">
    </a>
</div>

</body>
</html>

Booom007

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html中hover属性拓展鼠标放置在图片上出现二维码

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; div { marg
复制链接

扫一扫