android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效
background-blur是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效jQuery插件。它会抽取图片的主要色彩,并通过SVG过滤器来制作模糊效果。并且它还通过velocity.js来提供额外的图片切换时淡入淡出的效果。
该插件在支持SVG的浏览器中使用SVG过滤器来制作图片模糊效果(IE浏览器除外)。在IE浏览器中,插件会创建一个标签并在CSS中使用IE特有的模糊滤镜来模糊图片。
安装
可以通过bower来安装该背景图片模糊特效插件。
bower install background-blur
或者下载压缩包,在页面中引入下面的文件。
使用方法
HTML结构
该背景图片模糊特效的基本HTML结构如下:
...
CSS样式
需要为该背景图片模糊特效提供一些基本的CSS样式:
.container {
overflow: hidden;
width: 100%;
position: relative;
}
.container .bg-blur-overlay {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
}
.container .bg-blur {
z-index: -2;
opacity: 0;
position: absolute;
width: 100%;
min-height: 100%;
height: auto;
display: block;
top: 0;
left: 0;
}
.container .content { z-index: 1; }
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该插件。
$('#some-element').backgroundBlur({
imageURL : 'http://URL-of-the-image',
blurAmount : 50,
imageClass : 'bg-blur'
});
也可以通过下面的方法来创建一张淡入的模糊图片效果。
$('#some-element').backgroundBlur({
imageURL : 'http://URL-of-the-image',
blurAmount : 50,
imageClass : 'bg-blur'
duration: 1000, // If the image needs to be faded in, how long that should take
endOpacity : 1 // Specify the final opacity that the image will have
});
也可以插件一张淡入的模糊图片,然后切换到另一张图片。
// 初始化牧户效果
$('#some-element').backgroundBlur({
imageURL : 'http://URL-of-the-image',
blurAmount : 50,
imageClass : 'bg-blur'
duration: 1000, // If the image needs to be faded in, how long that should take
endOpacity : 1 // Specify the final opacity that the image will have
});
//切换图片
$('#some-element').backgroundBlur('http://URL-of-another-image');
结合Velocity.js来使用
如果你使用Velocity.js动画库,那么该插件会自动检测它是否存在,这会提供淡入淡出效果的动画性能,特别是在移动手机设备中。如果没有检测到Velocity,插件会使用jQUery的animate()方法来制作淡入淡出效果。
浏览器兼容
Chrome
Firefox
Safari and Safari Mobile (iOS)
IE6, IE7, IE9, IE10, IE11
Android browsers
android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效相关推荐
- android 下拉放大背景图,Swift - 实现下拉时背景图片放大效果(仿QQ个人资料页面)...
在 QQ的个人信息页面上方有个背景图片,当我们下拉整个页面时,这个背景图会随着拖动距离而变大.下面通过样例演示这个效果如何实现. 1,效果图 当下拉页面时,背景图片会随着偏移量的增加而放大. 2,样例 ...
- android 加载动画效果_这效果炸了,网易云音乐“宇宙尘埃”特效
本文作者 作者:Mlx 链接: https://juejin.im/post/6871049441546567688 本文由作者授权发布. 1前言 前段时间,女朋友用网易云音乐的时候看到一个宇宙尘埃特 ...
- Android UI控件之Gallery(拖动效果) --拖动式图片浏览
我们知道现在智能手机上都有这样一种功能,就是你在浏览图片的时候.不是硬性的点击按钮 而是可以实现手指的拖动,划开效果.使用户具有更好的交互体验,不过这种效果是如何实现的呢? 在Android中是通过G ...
- Android利用贝塞尔曲线实现翻书效果(适配AndroidX)
实现背景 不知道你有没有遇到同样的问题,要实现翻书效果,如果你是使用github上的demo或者好多博客上写的方式,你会发现,当api从28开始,会抛出Invalid Region.Op.REPLAC ...
- 怎么把视频做成背景html,基于HTML5 video标签的背景视频效果
直接贴代码~ 背景视频 body{ position:relative; overflow: hidden; margin:0; height:100% } .divbak{ width: 100%; ...
- Android自定义控件之3D上下翻页效果的倒计时控件
这是一个自定义的倒计时控件,具有3D上下翻页翻转效果.最近项目中需要做一个倒计时控件,需要和iOS端的效果保持一样.大致效果是这样的,如下图所示: 由于暂时还不会怎么样制作gif动态图,所以想看具体效 ...
- java设置滚动条的样式_[Java教程]美化浏览器滚动条效果
[Java教程]美化浏览器滚动条效果 0 2016-10-31 16:02:28 任务需求:由于不同浏览器对滚动条的样式解析存在差异,为统一样式风格,增加整体美观程度,需要实现自定义滚动条. 第一种方 ...
- android 辅助功能 翻页,Android利用悬浮按钮实现翻页效果
今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在An ...
- android状态栏白色,Android如何实现状态栏白底黑字效果
Android如何实现状态栏白底黑字效果 发布时间:2021-04-16 12:28:10 来源:亿速云 阅读:77 作者:小新 这篇文章给大家分享的是有关Android如何实现状态栏白底黑字效果的内 ...
最新文章
- Spring-Boot注入自定义properties文件配置
- 2021年AI网络安全发展趋势
- springboot 接收小程序图片以及参数_常见的SpringBoot面试题一
- 广西区计算机一级全称是,计算机一级考试(广西区)历年真题-20210412075414.pdf-原创力文档...
- Java Application 直接通过jndi连接数据库
- js中的转译_JavaScript中的填充和转译
- Inception v2/v3原理与实现
- Java编程中“为了性能”尽量要做到的一些地方 [转]
- .NET Core 3.0中的新功能和增强功能
- 【零基础学Java】—Java 日期时间(三十一)
- C#之http transfer-Encoding模式
- PS自定义形状+笔刷添加打造完美水印
- linux kvm 的虚拟机处于暂停状态怎么开机 和 KVM-Virsh指令
- 0xc0000225无法进系统_win10系统出现0xc0000225无法进入系统的恢复方法
- Tegra TK1中文输入法
- 「硅仙人」吉姆 · 凯勒
- py实战绘制人口金字塔图
- macbook上好用的解压软件_全能解压 Mac下最好用的解压缩软件
- 程序员健康之——护腰指南
- CIO挂帅绩效考核 初战告捷秘诀何在?
热门文章
- 孩子需要赞赏,更需要尊重
- 几种sklearn库直接实现分类算法
- 2021年低压电工及低压电工模拟考试题库
- IP地址的解释以及计算
- 推特源代码在GitHub 泄漏三个月之久
- linux下添加mq队列管理配置,linux下 MQ第二弹:队列管理器的配置,实现双机MQI通道异步双向通信,亲测!!...
- 我关注的一周技术动态 2015.11.08
- Handler内存溢出解决方案
- php教程技术胖,phpinfo()的小秘密(一个胖子嘴中刁着两支烟!:-) )-PHP教程,PHP应用...
- 目标检测——detr源码复现【 End-to-End Object Detection with Transformers】