Html
    Css
    Js

    
                        
.box {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:800px
}
.con {
	position:relative;
}
.con .img {
	-webkit-filter:grayscale(100%);
	filter:grayscale(100%);
	width:100%;
}
.conshowed {
	position:absolute;
	width:0;
	height:100%;
	top:0;
	left:0;
	background:url(http://www.jq22.com/img/cs/500x300-1.png) no-repeat;
	animation:mymove 3s linear infinite;
	-webkit-animation:mymove 3s linear infinite;
	/*Safari and Chrome*/z-index:99
}
@keyframes mymove {
	from {
	width:0;
}
to {
	width:100%;
}
}@-webkit-keyframes mymove /*Safari and Chrome*/ {
	from {
	width:0;
}
to {
	width:100%;
}
}

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

纯css图片扫描动画(原创)

更新时间:2019-08-07 08:48:22

0