我想大家都用过扫码插件,也想像微信和支付宝那样。但是有些插件是可以自定义样式的,但是有些则不行了。现在开发的app中有用到扫码的插件,但是默认的样式很丑,所以就想着能够能够实现像微信和支付宝那样的样式。
代码如下:
html
<div class="scan"></div>
css
.scan {
width: 150px;
height: 150px;
margin: 30px auto;
position: relative;
background: linear-gradient(to left, #108EE9, #108EE9) left top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left top no-repeat, linear-gradient(to left, #108EE9, #108EE9) right top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) right top no-repeat, linear-gradient(to left, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat;
background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
}
.scan::after {
content: '';
width: 140px;
border: 1px solid #BBE2FF;
position: absolute;
left: 5px;
top: 2px;
animation: myfirst 4s infinite;
}
@keyframes myfirst {
from {
top: 2px;
}
to {
top: 144px;
}
}
最终的效果如图:
background: linear-gradient(to left, #108EE9, #108EE9) left top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left top no-repeat, linear-gradient(to left, #108EE9, #108EE9) right top no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) right top no-repeat, linear-gradient(to left, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to bottom, #108EE9, #108EE9) left bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat, linear-gradient(to left, #108EE9, #108EE9) right bottom no-repeat;
background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
这两行代码是实现四个蓝色角的关键,也是其中不好懂的地方。
如果扫描二维码插件需要自定义样式的话,那就用起来吧。