CSS는 QR 코드 스캔의 효과를 실현합니다.

이 글에서는 CSS를 사용하여 QR 코드 스캔 효과를 얻는 방법을 소개합니다. 필요한 참고 자료가 있으면 도움이 될 것입니다.

QR코드 스캔 효과, 쓰기 어렵다고 생각했는데, 생각해보니 코드 몇 줄이면 꽤 간단하고 가죠

<p class="code-bg"><br/>    <p class="line"></p><br/></p><br/>

.code-bg{<br/>		    position: relative; <br/>		    height: 200px; width: 200px; <br/>		    margin: 0px auto;/*此处为了居中*/<br/>		    background: url(img/ewm1.jpg) center top no-repeat; /*二维码*/<br/>		}<br/>		.line{ <br/>		    position: absolute; <br/>		    left: -80px; <br/>		    z-index: 2; <br/>		    height: 3px; width: 360px; <br/>		    background: url(img/share/dapai.png) no-repeat; /*上下扫的线*/<br/>		    /*动画效果*/<br/>		    animation: myScan 1s infinite alternate; <br/>		    -webkit-animation: myScan 1s infinite alternate; <br/>		}<br/>		@keyframes  myScan{<br/>		    from { top:0px; }<br/>		    to { top: 197px; }<br/>		}<br/>		-webkit-@keyframes  myScan{<br/>		    from { top:0px; }<br/>		    to { top: 197px; }<br/>		}<br/>

편하지 않네요 여기서 스크린샷을 찍어서 해보자. 아주 간단하지 않나요?

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

CSS 온라인 매뉴얼

div/css 그래픽 튜토리얼

위 내용은 CSS는 QR 코드 스캔의 효과를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!