我想大家都用過掃碼插件,也想像微信和支付寶那樣。但是有些插件是可以自定義樣式的,但是有些則不行了。現在開發的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;
這兩行代碼是實現四個藍色角的關鍵,也是其中不好懂的地方。
如果掃描二維碼插件需要自定義樣式的話,那就用起來吧。