学习如何使用html和css样式将两张图片叠加到另一张图片上，实现微信扫一扫二维码效果

article/2025/10/27 14:39:33

学习如何使用html和css样式将两张图片叠加到另一张图片上，实现微信扫一扫二维码效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><link rel="stylesheet" href="menuStyle.css"/><title>二维码扫一扫</title>
</head><style>.top {position: absolute;z-index: 1;margin-top: 1%;margin-left: -280px;transition: background-color 300ms;transition-property: background-color;transition-duration: 300ms;transition-timing-function: ease;transition-delay: 0s;}</style>
<body>
<div><a href="#"><img src='image/wenku_login.jpg' width="300" height="300"></a><a href="#"><img id="qrcode_saoyisao" class="top" src='image/saoyisao.png' width="300" height="300"></a></div><script src="image/jquery.js" type='text/javascript'></script>
</body><script type="text/javascript">//赋值扫一扫function scanPic() {$("#qrcode_saoyisao").attr('src', 'image/saoyisao.png');}// 设置定时器(function () {// 两秒调用一次let scanTime = 3 * 1000;// console.log(topTime);setInterval("scanPic()", scanTime);})();</script></html>