<!DOCTYPE"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="baidu-site-verification" content="d9oiSigqhs" /> <meta name="baidu-site-verification" content="LPBhOoGxHp" /> <style> .qr-code{ padding-top: 22px; width: 100%; height: 252px; text-align: center; background: #05c2df; } .qr-code div{ position: relative; margin: 0 auto; width: 200px; height: 200px; overflow: hidden; } .qr-code img{ width: 100%; height: 100%; } .scanning{ width: 200px; height: 0; position: absolute; top: 0; left: 0; display: inline-block; background: rgba(26, 132, 190, 0.3); border-bottom: 3px solid #4AB86A; animation: move 5s linear infinite; -webkit-animation: move 5s linear infinite; -moz-animation: move 5s linear infinite; -o-animation: move 5s linear infinite; -ms-animation: move 5s linear infinite; } @keyframes move { from { height: 0px; } to { height: 100%; } } @-webkit-keyframes move { from { height: 0px; } to { height: 200px; } } @-moz-keyframes move { from { height: 0px; } to { height: 200px; } } @-o-keyframes move { from { height: 0px; } to { height: 200px; } } .qr-code p{ margin: 6px; font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;; font-size: 17px; color: #fff; } </style> </head> <body> <div class="qr-code"> <div> <img src="img/qr-code.png"> <span class="scanning"></span> </div> <p>加客服微信 随时随地咨询</p> </div> </body> </html>
