如何利用HTML5和CSS3代码实现模糊滤镜

 时间:2024-11-12 09:53:41

1、第一步,打开HBuilder工具,新建静态页面blur.html,如下图所示:

如何利用HTML5和CSS3代码实现模糊滤镜

2、第二步,在<body></body>插入一个<div></div>,再在div元素里插入五个img元素,分别设置为class,如下图所示:

如何利用HTML5和CSS3代码实现模糊滤镜

3、第三步,设置五个img元素的样式,图片高度和宽度为250px,如下图所示:

如何利用HTML5和CSS3代码实现模糊滤镜

4、第四步,预览该静态页面,在浏览器中查看页面效果,如下图所示:

如何利用HTML5和CSS3代码实现模糊滤镜

5、第五步,分别设置class为two、three、four和five的样式,如下图所示:

如何利用HTML5和CSS3代码实现模糊滤镜

6、第六步,再次预览该静态页面,利用IE浏览器查看效果,如下图所示:

如何利用HTML5和CSS3代码实现模糊滤镜
  • PPT如何开启以打印机分辨率校正透明图形功能?
  • CSS3中有哪些设置文本高级样式的属性?
  • bootstrap框架的图片
  • 谷歌浏览器如何把收藏的书签导出成HTML文件
  • jquery如何实现点击按钮文本替换成输入框的内容
  • 热门搜索
    epub怎么打开 宝宝便秘怎么办 用户账户控制怎么取消 怎么清理电脑垃圾 甲鱼怎么养 手机忘记密码怎么办 非常好的英文怎么写 身上痒是怎么回事 月经提前怎么调理 蛀牙怎么办