css文件扫描动效

最新推荐文章于 2024-07-10 09:29:35 发布

乐夫天命兮

最新推荐文章于 2024-07-10 09:29:35 发布

阅读量914

点赞数 1

分类专栏： CSS 文章标签：文件扫描动效

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/89673124

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

具体效果如下：
在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文件扫描动效</title>
	</head>
	<style>
		.code-bg{
		    position: relative; 
		    height: 179px;
		    width: 179px; 
		    margin: 0px auto;/*此处为了居中*/
		    text-align: center; 
		    background: url(img/code-bg.png) center top no-repeat;
		    border: 1px solid #eee;
		}
		.code-bg img{ 
		    position: absolute;
		    top:  10px; left: 20px;
		    z-index: 1;
		    height: 160px; width: 160px; 
		}
		
		.line{ 
		    position: absolute; 
		    top: 5px; 
		    left: -60px; 
		    z-index: 2; 
		    height: 3px; 
		    width: 360px;
		    background: url(img/line.png) no-repeat; 
		    /*动画效果*/
		    animation: myScan 2s infinite alternate;  
		    -webkit-animation: myScan 2s infinite alternate;
		}
		
		@keyframes  myScan{
		    from { top:5px; }
		    to { top: 170px; }
		}
		
		-webkit-@keyframes  myScan{
		    from { top:5px; }
		    to { top: 170px; }
		}
	</style>
	<body>
		<div class="code-bg">
		    <div class="line"></div>
		    <img src="img/1.jpg" alt="">
		</div>
	</body>
</html>