<!DOCTYPE html>
<html>
<head>
<title>大图片加载从模糊到清晰</title>
</head>
<body style="text-align:center">
<h3>大图片加载从模糊到清晰</h3>
<div class="mark" style='background-image:url(http://img.neweb.top/20181110.jpg);background-size:100%;
filter: blur(4px);transition: all 0.7s;width: 800px;height: 450px;margin-left: 350px;'>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 为了看到效果加个延时
setTimeout(function(){
// 若图片URL失效请自行替换
var imgUrl = 'http://img.neweb.top/20181110.jpg';
var imgObject = new Image();
imgObject.src = imgUrl;
imgObject.onload = function(){
$('.mark').css({
backgroundImage: 'url('+imgUrl+')',
filter: 'blur(0)'
});
}
}, 1000)
</script>
</body>
</html>
运用CSS高斯模糊添加图片加载效果的相关教程结束。
