HTML+CSS模仿鸿图之下官网二维码扫描效果
HTML代码
<div class="right-nav">
<div class="right-code">
<img src="//game.gtimg.cn/images/srpg/cp/a20200818xzz/download_code.png" alt="" class="img-download">
<span class="light"></span>
</div>
</div>
CSS代码
/* right-nav */
.right-nav{
display: block;
width: 164px;
height: 511px;
background: url(//game.gtimg.cn/images/srpg/cp/a20200818xzz/right_nav.png) no-repeat;
position: fixed;
right: 0px;
top: 50%;
margin-top: -275px;
z-index: 99;
}
.right-code{
display: block;
width: 88%;
height: auto;
margin: 39px auto 0;
position: relative;
}
.right-code img{
display: block;
width: 100%;
}
.light{
display:block;
width: 100%;
height: 4px;
background-color: #f4d004;
position: absolute;
top:0px;
left:0;
animation: myScan 1s infinite alternate;
-webkit-animation: myScan 1s infinite alternate;
}
@keyframes myScan {
from {
top: 0px;
}
to {
top: 130px;
}
}
@-webkit-keyframes myScan {
from {
top: 0px;
}
to {
top: 130px;
}
}