6、css3实现二维码扫码样式

最新推荐文章于 2024-07-30 16:49:30 发布

cyz141001

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量196

点赞数 1

分类专栏：前端微型项目文章标签： css3 前端 css

本文链接：https://blog.csdn.net/cyz141001/article/details/139354112

版权

前端微型项目专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果例图：

1、首先是html代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./3.css">
    <title>Document</title>
</head>

<body>
    <div class ="box">
        <div class="box-bg">
            <img src="图片地址" alt="" srcset="">
        </div>
    </div>
</body>
</html>

2、css3核心代码：

.box{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #1f87b5;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 22px;
    overflow: hidden;
    z-index: 999;
}
.box-bg{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #e3e3e3 1px, transparent 1px),
                    linear-gradient(to bottom, #ededed 1px, transparent 1px);
    background-size: 10px 10px;
    background-position: center;
}
img{
    width: 100%;
    height: 100%;
}
.box::after{
    content: "";
    position: absolute;
    top: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background-color: #0443e3;
    box-sizing: border-box;
    margin-top: 0px;
    z-index: 998;
    animation: bganimation 2s infinite;
    box-shadow: -21px 0px 26px 5px #0f40ba;
}



@keyframes bganimation{
    0%{
        margin-top: 0%;
    }
    1%{
        margin-top: 1%;
    }
    2%{
        margin-top: 2%;
    }
    3%{
        margin-top: 3%;
    }
    4%{
        margin-top: 4%;
    }
    5%{
        margin-top: 5%;
    }
    6%{
        margin-top: 6%;
    }
    7%{
        margin-top: 7%;
    }
    8%{
        margin-top: 8%;
    }
    9%{
        margin-top: 9%;
    }
    10%{
        margin-top: 10%;
    }
    11%{
        margin-top: 11%;
    }
    12%{
        margin-top: 12%;
    }
    13%{
        margin-top: 13%;
    }
    14%{
        margin-top: 14%;
    }
    15%{
        margin-top: 15%;
    }
    16%{
        margin-top: 16%;
    }
    17%{
        margin-top: 17%;
    }
    18%{
        margin-top: 18%;
    }
    19%{
        margin-top: 19%;
    }
    20%{
        margin-top: 20%;
    }
    21%{
        margin-top: 21%;
    }
    22%{
        margin-top: 22%;
    }
    23%{
        margin-top: 23%;
    }
    24%{
        margin-top: 24%;
    }
    25%{
        margin-top: 25%;
    }
    26%{
        margin-top: 26%;
    }
    27%{
        margin-top: 27%;
    }
    28%{
        margin-top: 28%;
    }
    29%{
        margin-top: 29%;
    }
    30%{
        margin-top: 30%;
    }
    31%{
        margin-top: 31%;
    }
    32%{
        margin-top: 32%;
    }
    33%{
        margin-top: 33%;
    }
    34%{
        margin-top: 34%;
    }
    35%{
        margin-top: 35%;
    }
    36%{
        margin-top: 36%;
    }
    37%{
        margin-top: 37%;
    }
    38%{
        margin-top: 38%;
    }
    39%{
        margin-top: 39%;
    }
    40%{
        margin-top: 40%;
    }
    41%{
        margin-top: 41%;
    }
    42%{
        margin-top: 42%;
    }
    43%{
        margin-top: 43%;
    }
    44%{
        margin-top: 44%;
    }
    45%{
        margin-top: 45%;
    }
    46%{
        margin-top: 46%;
    }
    47%{
        margin-top: 47%;
    }
    48%{
        margin-top: 48%;
    }
    49%{
        margin-top: 49%;
    }
    50%{
        margin-top: 50%;
    }
    51%{
        margin-top: 51%;
    }
    52%{
        margin-top: 52%;
    }
    53%{
        margin-top: 53%;
    }
    54%{
        margin-top: 54%;
    }
    55%{
        margin-top: 55%;
    }
    56%{
        margin-top: 56%;
    }
    57%{
        margin-top: 57%;
    }
    58%{
        margin-top: 58%;
    }
    59%{
        margin-top: 59%;
    }
    60%{
        margin-top: 60%;
    }
    61%{
        margin-top: 61%;
    }
    62%{
        margin-top: 62%;
    }
    63%{
        margin-top: 63%;
    }
    64%{
        margin-top: 64%;
    }
    65%{
        margin-top: 65%;
    }
    66%{
        margin-top: 66%;
    }
    67%{
        margin-top: 67%;
    }
    68%{
        margin-top: 68%;
    }
    69%{
        margin-top: 69%;
    }
    70%{
        margin-top: 70%;
    }
    71%{
        margin-top: 71%;
    }
    72%{
        margin-top: 72%;
    }
    73%{
        margin-top: 73%;
    }
    74%{
        margin-top: 74%;
    }
    75%{
        margin-top: 75%;
    }
    76%{
        margin-top: 76%;
    }
    77%{
        margin-top: 77%;
    }
    78%{
        margin-top: 78%;
    }
    79%{
        margin-top: 79%;
    }   
    80%{
        margin-top: 80%;
    }
    81%{
        margin-top: 81%;
    }
    82%{
        margin-top: 82%;
    }
    83%{
        margin-top: 83%;
    }
    84%{
        margin-top: 84%;
    }
    85%{
        margin-top: 85%;
    }
    86%{
        margin-top: 86%;
    }
    87%{
        margin-top: 87%;
    }
    88%{
        margin-top: 88%;
    }
    89%{
        margin-top: 89%;
    }
    90%{
        margin-top: 90%;
    }
    91%{
        margin-top: 91%;
    }
    92%{
        margin-top: 92%;
    }
    93%{
        margin-top: 93%;
    }
    94%{
        margin-top: 94%;
    }
    95%{
        margin-top: 95%;
    }
    96%{
        margin-top: 96%;
    }
    97%{
        margin-top: 97%;
    }
    98%{
        margin-top: 98%;
    }
    99%{
        margin-top: 99%;
    }
    100%{
        margin-top: 100%;
    }
}

总结： CSS3写的有点慢，如果使用lass或者sass可能更加方便，仅供参考