<style>
* {
padding: 0;
margin: 0;
border-box: box-sizing;
}
html, body {
width: 100%;
height: 100%;
background-color: #eee;
}
.qrcode {
padding-left: 30px;
width: 200px;
height: 250px;
position: fixed;
bottom: 100px;
left: 0;
}
.qrcode1 {
width: 100%;
height: 100%;
background-color: pink;
}
.qrcode2 {
width: 30px;
height: 100%;
position: absolute;
right: -30px;
top: 0;
bottom: 0;
background-color: gray;
display: none;
}
@media screen and (min-width: 800px) and (max-width: 1280px) {
.qrcode {
transform: translateX(-100%);
transition: transform .3s;
}
.qrcode2 {
display: block;
opacity: 1;
transition: opacity .3s;
}
.qrcode:hover {
transform: translateX(0);
}
.qrcode:hover .qrcode2 {
opacity: 0;
}
}
</style>
<div class="qrcode">
<div class="qrcode1">
</div>
<div class="qrcode2">
</div>
</div>
方法二:
html + css
<div class="qrcode">
<div class="qrcode1">
<img src="../../../public/img/qrcode.png" alt />
<span>扫码下载APP</span>
</div>
<div class="qrcode2">
<span>扫码下载APP</span>
</div>
</div>
.qrcode {
position: fixed;
left: 0px;
bottom: 30px;
text-align: center;
display: flex;
background-color: #fff;
border: 1px solid #eee;
z-index: 1000;
.qrcode1 {
width: 100px;
padding: 10px;
background-color: #fff;
img {
width: 100%;
}
}
.qrcode2 {
width: 30px;
padding: 4px;
// background-color: gray;
display: none;
padding-top: 20px;
background-color: #fff;
// transform: translateX(-100%);
// transition: transform 0.3s;
}
}
@media screen and (min-width: 800px) and( max-width: 1280px) {
.qrcode {
transform: translateX(-100%);
transition: transform 0.3s;
.qrcode2 {
display: block;
transform: translateX(100%);
}
}
.qrcode:hover {
.qrcode1 {
// display: block;
transform: translateX(144%);
// transition: opacity 0.5s;
transition: transform 0.3s;
}
.qrcode2 {
// display: none;
opacity: 0;
transition: opacity 0s;
// transform: translateX(-100%);
}
}
}