Html
    Css
    Js

    
                        
.code-bg {
	position:relative;
	height:140px;
	width:120px;
	margin:0px auto;
	/*此处为了居中*/
	text-align:center;
	background:url(https://www.jq22.com/tp/6369661901916572401307462.png) center top no-repeat;
}
.code-bg img {
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
	height:140px;
	width:120px;
}
.line {
	position:absolute;
	top:0px;
	left:10px;
	z-index:2;
	height:5px;
	width:320px;
	background:url(http://xjcode.top/face//upload/code.jpg) no-repeat;
	/*动画效果*/
			animation:myScan 1s infinite alternate;
	-webkit-animation:myScan 1s infinite alternate;
}
@keyframes  myScan {
	from {
	top:10px;
}
to {
	top:125px;
}
}-webkit-@keyframes  myScan {
	from {
	top:10px;
}
to {
	top:125px;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

ajax图片上传并预览

需在站点建立一个upload的存放图片的文件夹,其余代码直接写在一个index.html里就行

0