css实现扫一扫动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css实现扫一扫动画</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
#qr-shaded-region{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
/* background-color: rgba(225, 24, 24); */
background-color: rgb(90, 38, 221);
}
.qs-region-box{
height: 100%;
width: 100%;
/* border-width: 60px 140px;*/
border-style: solid; border-color: rgba(0, 0, 0, 0.32);
box-sizing: border-box; inset: 0px;
position: relative;
}
.left-top{
position: absolute;
background-color: rgb(255, 255, 255);
width: 30px;
height: 3px;
top: -3px;
left: 0px;
}
.right-top{
position: absolute;
background-color: rgb(255, 255, 255);
width: 30px;
height: 3px;
top: -3px;
right: 0px;
}
.left-bottom{
position: absolute;
background-color: rgb(255, 255, 255);
width: 30px;
height: 3px;
bottom: -3px;
left: 0px;
}
.right-bottom{
position: absolute;
background-color: rgb(255, 255, 255);
width: 30px;
height: 3px;
bottom: -3px;
right: 0px;
}
.left-lt{
position: absolute;
background-color: rgb(255, 255, 255);
width: 3px;
height: 35px;
top: -3px;
left: -3px;
}
.right-rt{
position: absolute;
background-color: rgb(255, 255, 255);
width: 3px;
height: 35px;
bottom: -3px;
left: -3px;
}
.left-lb{
position: absolute;
background-color: rgb(255, 255, 255);
width: 3px;
height: 35px;
top: -3px;
right: -3px;
}
.right-rb{
position: absolute;
background-color: rgb(255, 255, 255);
width: 3px;
height: 35px;
bottom: -3px;
right: -3px;
}
.scan-bar {
width: 100%;
height: 2px;
/* background: rgba(0, 0, 0, 0.5) #76C02E; */
background-color: #76C02E;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite;
/* Firefox */
-webkit-animation: mymove 5s infinite;
/* Safari and Chrome */
-o-animation: mymove 5s infinite;
/* Opera */
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 258px;
}
}
@-moz-keyframes mymove
/* Firefox */
{
from {
top: 0px;
}
to {
top: 258px;
}
}
@-webkit-keyframes mymove
/* Safari and Chrome */
{
from {
top: 0px;
}
to {
top: 258px;
}
}
@-o-keyframes mymove
/* Opera */
{
from {
top: 0px;
}
to {
top: 258px;
}
}
</style>
<body>
<div id="qr-shaded-region">
<div class="qs-region-box" id="qs-region-box">
<div class="left-top"></div>
<div class="right-top"></div>
<div class="left-bottom"></div>
<div class="right-bottom"></div>
<div class="left-lt"></div>
<div class="right-rt"></div>
<div class="left-lb"></div>
<div class="right-rb"></div>
<div class="scan-bar"></div>
</div>
</div>
</body>
<script>
window.addEventListener('resize', getWindowInfo);
getWindowInfo()
function getWindowInfo(){
const windowInfo = {
width: window.innerWidth,
hight: window.innerHeight
}
// 计算宽度边距
const wp = (windowInfo.width - 260 )/2 + 'px';
const hp = (windowInfo.hight - 260 )/2 + 'px';
const box = document.getElementById("qs-region-box");
if(box){
box.style.borderWidth =hp+ ' ' +wp;
}
console.log(wp,hp);
console.log(windowInfo);
}
</script>
</html>
页:
[1]