Example code for implementing a QR code scanning box with CSS
|
We usually have a scanning box when we open the camera, and sometimes a static QR code will also add a frame for focusing and facilitating scanning. Here's how to implement a frame through CSS Effect:
The code is as follows: html:
<div class="img-box">
<img class="code" src="https://image-static.segmentfault.com/149/570/149570997-5b987cc928d69_articlex">
</div>css:
.img-box {
background: linear-gradient(#ae0000, #ae0000) left top,
linear-gradient(#ae0000, #ae0000) left top,
linear-gradient(#ae0000, #ae0000) right top,
linear-gradient(#ae0000, #ae0000) right top,
linear-gradient(#ae0000, #ae0000) right bottom,
linear-gradient(#ae0000, #ae0000) right bottom,
linear-gradient(#ae0000, #ae0000) left bottom,
linear-gradient(#ae0000, #ae0000) left bottom;
background-repeat: no-repeat;
background-size: 2px 20px, 20px 2px;
height: 116px;
width: 116px;
}
.code {
height: 110px;
width: 110px;
margin-top: 2px;
margin-left:2px;
border: 1px solid #ae0000;
}
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Implementation of tomcat deployment project and integration with IDEA
Recommend
An article to give you a deep understanding of Mysql triggers
Table of contents 1. When inserting or modifying ...
Linux Domain Name Service DNS Configuration Method
What is DNS The full name of DNS is Domain Name S...
How to dynamically add modules to Nginx
Written in front Often, after we install Nginx ba...
Implementation of css transform page turning animation record
Page turning problem scenario B and C are on the ...
The webpage cannot be opened because the div element lacks a closing tag
At first I thought it was a speed issue, so I late...
JavaScript implementation of a simple addition calculator
This article example shares the specific code of ...
Add crontab scheduled tasks to debian docker container
Now most of the Docker images are based on Debian...
MySQL changes the default engine and character set details
Table of contents 1. Database Engine 1.1 View dat...
A brief introduction to the usage of decimal type in MySQL
The floating-point types supported in MySQL are F...
Detailed explanation of Truncate usage in MySQL
Preface: When we want to clear a table, we often ...
Introduction to Vue3 Composition API
Table of contents Overview Example Why is it need...
Comprehensive analysis of MySql master-slave replication mechanism
Table of contents Master-slave replication mechan...
Introduction to HTML basic controls_PowerNode Java Academy
The <input> tag The <input> tag is us...
Comparing the performance of int, char, and varchar in MySQL
There are many seemingly true "rumors" ...
Implementing a simple calculator with javascript
This article example shares the specific code of ...