文档章节

CSS3无前缀脚本prefixfree.js及Animatable介绍

h
 hhj187
发布于 2016/09/13 11:07
字数 1177
阅读 8
收藏 0

我是从《响web设计》p106知道prefixfree是用于css文件自动追加前缀的JavaScript方案。

prefixfree官网http://leaverou.github.io/prefixfree/,但没找到下载地址

——————————————————————————————————

以下是张鑫旭博客《CSS3无前缀脚本prefixfree.js及Animatable介绍》(原文:http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/):

一、引导之言

虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。像box-shadow,border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,oh,my GEE GEE,前缀少不了,于是每次应用都像是建大楼一样,如下jQuery Mobile CSS中的某一渐变截图:
霸气侧漏的前缀啊 张鑫旭-鑫空间-鑫生活

比楼高是很傻逼的一件事情,所以如此霸气侧漏的CSS大楼反而让人伤不起,我们总希望一马平川小山丘,老天开眼掉美妞。心中甚是希望跟这些前缀说“顾德白”。有此想法的前端er们想必大有人在,于是,一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的东西。有了这个东西,嘿嘿,阴沉的天空顿时划出一道圣洁光芒。

二、prefixfree.js的使用

首先,在页面的头部调用如下脚本:

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

github有时候会出现反应迟钝的情况,您还可以调用如下链接:

<script src="http://www.zhangxinxu.com/study/js/mini/prefixfree.min.js"></script>

然后,随便你是在link中,或是style中,或是dom元素的style中书写CSS3 code,或是jQuery .css()方法此脚本会自动补上需要的前缀,让响应的浏览器支持该CSS3属性。使用非常之轻松惬意。

例如后面这个demo页面所展示的,您可以狠狠地点击这里:prefixfree.js使用简单测试demo

demo页面的渐变相关代码就是下面寥寥两行:

background-color: #a0b3d6;
background-image: linear-gradient(top, #beceeb, #34538b);

但是,所有较新的现代浏览器下都长得一表人才,例如支持渐变较晚的Opera浏览器:
Opera浏览器下午前缀应用的效果截图 张鑫旭-鑫空间-鑫生活

是不是简单得让人提不起精神哈!

貌似prefixfree项目的首页你可以去这个地址查看:http://leaverou.github.com/prefixfree/

该页面上列出了prefixfree.js几个局限性的地方:

  1. @import-ed之类文件不鸟
  2. 跨域链接样式不鸟
  3. 无前缀链接样式Chrome和Opera下部分不鸟
  4. 行内style无前缀值在IE和FireFox3.6以下不鸟,FireFox 3.6下的属性亦如此

浏览器支持
目标浏览器为IE9+, Opera 10+, Firefox 3.5+, Safari 4+ 和 Chrome。

三、prefixfree.js应用之Animatable

Animatable是纳尼?
Animatable这东东似乎与prefixfree.js的有些同父这般狗血的血缘关系。因为Animatable项目的页面地址是:http://leaverou.github.com/animatable/

这就跟打死我也不相信王语嫣和神仙姐姐没有关系一样。八卦先扔一边,Animatable借助prefixfree.js将CSS中各个属性的动画效果都展示出来了。有些动画效果是不看不知道,看了吓一跳。比如说第四个晃得我眼睛看到星星的纹理动画效果:
底纹动画效果截图 张鑫旭-鑫空间-鑫生活

我看了这些动画效果,顿生了不少灵感和渐进增强的交互应用,不知你是否也有些想法呢?

Animatable项目页面动画效果的批量实现原理如下:
1. 遍历页面上每个含有data-property属性的a元素;
2. 根据dom元素上的data-property值,form值和to值组装无前缀的CSS3 animate样式代码;
3. 以style节点元素的形式将组装的CSS代码append到head标签中,因页面调用了prefixfree.js脚本,于是各个浏览器下的animate CSS被渲染,效果呈现。

animatable百画齐放效果截图 张鑫旭-鑫空间-鑫生活

用一个成语形容上图内容就是:百画齐放——一百个动画效果一起播放。

注:颜色的动画效果嘛,还是使用hsla颜色更好些。

四、结语

prefixfree.js可以大大简化偶们CSS3代码的数量,Animatable可以为我们实现一些交互效果提供灵感。上面我提到过我实现一些效果的灵感,例如下面这个例子,层的悬空动画效果:
普通div层的悬空动画效果 张鑫旭-鑫空间-鑫生活

鼠标以上去,div层左上位置,同时阴影越来越大,越来越淡。模拟真实世界的场景,于是就有了悬空感觉的效果。我们可以将类似这样子的效果渐进增强式的应用在我们的页面上,会是我们的页面蓬荜生辉的。

您可以狠狠地点击这里:层悬空动画效果demo

本文转载自:http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/

h
粉丝 1
博文 84
码字总数 12457
作品 0
天津
私信 提问
05-移动端开发教程-CSS3兼容处理

CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准。 浏览器有时会给一些在试...

aicoder
2017/12/29
0
0
5个能够有效帮助你快速创建超棒CSS3动画效果的类库

日期:2012-11-28 来源:GBin1.com 如果你开发前端特效的话,肯定会首选javascript类库,例如,jQuery,使用它能够帮助你快速的帮助你生成兼容性相对良好的动画特效。或者,如果你对于兼容性...

gbin1
2012/11/29
23
0
使用 Emmet 提高编写 CSS 的效率

前面 潜行者m 介绍了 Emmet 的功能和如何使用 Emmet 来生成 HTML 代码,这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。 首先,Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来...

sunshinewyf
2015/08/22
99
0
Modernizr:HTML5和CSS3的开发利器

随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣...

BryanYang
2014/02/24
775
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
67
0

没有更多内容

加载失败,请刷新页面

加载更多

setState() called after dispose() flutter

# 在setState前加入以下判断if (!mounted) return;

zdglf
29分钟前
3
0
docker和docker-compose二种方式安装mysql8.0

Docker方式安装 在命令行下运行 docker run -d -p 3306:3306 --restart always --privileged=true--name mysql-e MYSQL_USER="test" -e MYSQL_PASSWORD="test" -e MYSQL_ROOT_PASSWOR......

小白的成长
38分钟前
9
0
五大网络威胁应对挑战

既然如此,那么威胁的检测和响应过程是否像生产瑞士手表那样高效运行呢?答案远非如此。据ESG报告显示,威胁检测和响应过程充满各种各样的问题。来自372名企业网络安全和IT专家的数据,以下是...

linuxCool
39分钟前
5
0
jQuery 选择器使用大全(标签选择器,ID选择器等)

jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS(绝大部分WEB开发者都用到的),那么你学起来就很...

前端老手
45分钟前
4
0
HBase四种部署模式和基本操作

本文主要包括两部分的内容,第一部分主要包HBase的四种安装方法,分别是:① 单机版模式,② 伪集群模式,③ 使用HBase自带的zookeeper构建分布式集群,④ 使用独立安装的zookeeper构建分布式...

繁荣3000
53分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部