<!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高斯模糊添加图片加载效果的更多相关文章

  1. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  2. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  3. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  4. Android图片加载框架最全解析（六），探究Glide的自定义模块功能

    不知不觉中,我们的Glide系列教程已经到了第六篇了,距离第一篇Glide的基本用法发布已经过去了半年的时间.在这半年中,我们通过用法讲解和源码分析配合学习的方式,将Glide的方方面面都研究了个遍, ...

  5. jquery 页面加载效果

    30个jquery 页面加载效果 30个jquery 页面加载效果   30 CSS Page Preload Animations   加载效果列表 Square Animations Demo 1 ...

  6. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  7. css背景图片加载失败，页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  8. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  9. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

随机推荐

  1. sql 2008 权限角色控制

    Use Test --创建角色 create role rtt create user username for login username --将用户TestUser添加到TestRole角色中 ...

  2. android 标签页<include /> 的使用

    在android页面布局设计中,有时候需要用到很多相同的布局设计.如果每个用到该布局的xml里都写那个相同布局的话,会造成语句冗余,而且可读性很差. 为了解决这个问题的话,我们可以把相同布局的代码单独 ...

  3. 【知识碎片】 Linuxb 篇

    3.登录mysql 开启MySQL服务后,使用MySQL命令可以登录.一般使用mysql -uroot -p即可.如果数据库不是本机,则需要加参数,常用参数如下:1,-h,指定ip地址,默认为loca ...

  4. Python 的mock模拟测试介绍

    如何不靠耐心测试 可能我们正在写一个社交软件并且想测试一下"发布到Facebook的功能",但是我们不希望每次运行测试集的时候都发布到Facebook上. Python的unitt ...

  5. python：if 语句的使用方法

    if-else类型: #if-else num = int(input("输入成绩!")) if num > 60: print ("及格") else: ...

  6. 浅谈PL/SQL语言基础

    在前面的学习中,我们大部分接触的都是SQL语言,但是,在实现复杂操作的时候,SQL语言就无能为力了,这时候就需要引入新的语言,PL/SQL语言就是对SQL语言的扩展,可以实现存储过程,函数等的创建.下 ...

  7. IAR&nbsp;FOR&nbsp;ARM&nbsp;各版…

    用过Keil和IAR,个人感觉是IAR还是很不错的.下载地址是: http://files.iar.com/ftp/pub/box/CD-EWARM-6301-3142.zip V6.30.1(该地址 ...

  8. PHP数据结构之五 栈的PHP的实现和栈的基本操作

    栈和队列是两种应用非常广泛的数据结构,它们都来自线性表数据结构,都是“操作受限”的线性表. 栈栈在计算机的实现有多种方式:硬堆栈:利用CPU中的某些寄存器组或类似的硬件或使用内存的特殊区域来实现.这类 ...

  9. java基础之集合:List Set Map的概述以及使用场景

    本文的整体思路以及部分文字来源:来源一 和 来源二 Java集合类的基本概念: 首先大家要明白集合为什么会出现: 在编程中,常常需要集中存放多个数据.从传统意义上讲,数组是我们的一个很好的选择,前提是 ...

  10. Yii 2 load() 和 save()

    我这里用的数据库是mongo 数据库 为栗子: public function load($data, $formName = null) { $scope = $formName === null ...