js实现图片模糊聚焦放大显示效果代码

代码语言:html

所属分类:图片放大

代码描述:采用js实现的一个模糊聚焦的图片,点击show按钮焦点散开显示全局图片的动画效果代码

代码标签: 图片 模糊 放大

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <style>
        body,canvas,div {
	padding:0;
	margin:0;
}
a {
	text-decoration:none;
}
#can-div {
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.img-blur {
	display:block;
	margin:0 auto;
	filter:blur(20px);
	position:absolute;
	left:0;
	z-index:0;
}
#canvas {
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:100;
}
.btn {
	color:#fff;
	width:80px;
	height:30px;
	z-index:200;
	border-radius:5px;
	text-align:center;
	line-height:30px;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0