current position:Home>Learn how to use HTML and CSS styles to overlay two pictures on another picture to achieve the effect of scanning QR code by wechat

Learn how to use HTML and CSS styles to overlay two pictures on another picture to achieve the effect of scanning QR code by wechat

2022-04-29 16:05:17Lingering memory of Yufei

Learn how to use html and css Style superimposes two pictures on another picture , Realize the effect of wechat scanning QR code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="menuStyle.css"/>
    <title> QR code scan </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"> // Assignment sweep  function scanPic() {
       $("#qrcode_saoyisao").attr('src', 'image/saoyisao.png'); } //  Set the timer  (function () {
       //  Call once every two seconds  let scanTime = 3 * 1000; // console.log(topTime); setInterval("scanPic()", scanTime); })(); </script>

</html>

 Insert picture description here
Scan the accessories
 Insert picture description here

copyright notice
author[Lingering memory of Yufei],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291425562057.html

Random recommended