要求

    • 必备知识

      本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识。

    • 运行环境

      桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端:移动Safari,Android浏览器,Chrome浏览器和Opera Mobile。

    • 演示地址

      演示地址已经到文章中给出了,自己找找看哟。

现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的。像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,前缀少不了,每次都需要像盖高楼一样堆叠CSS3代码,如下图:

.bg {
width:400px;
height:177px;
margin:70px auto 0;
padding-top:73px;
position:relative;
background-image:-webkit-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
background-image:-moz-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
background-image:-ms-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
background-image:-o-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
background-image:linear-gradient(top,rgb(255,255,255),rgb(242,242,242));
box-shadow:0 3px 3px rgba(21,62,78,0.8);
}

代码效果如下,点击这里查看演示:

那么如何省去CSS3中前缀“-moz”、“-webkit”、“-o”、“-ms”呢,需要使用prefixfree脚本来实现。

一,下面说说如何使用prefixfree脚本:

下面是官方网站截图:

那么如何使用该脚本呢?下面是截至官网的两个DEMO,使用环境为Chrome,所以建议下载最新版的Chrome浏览器对演示地址进行浏览,希望能对使用提供帮助:

有前缀官方DEMO,未使用prefixfree脚本:

@-webkit-keyframes rotate {
from { -webkit-transform: rotate(15deg) }
to { -webkit-transform: rotate(375deg) }
} .download {
position: absolute;
top: 2em;
left: 1em;
width: 6em;
height: 6em;
padding: 1em 0;
background: #80A060;
background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
color: white;
line-height:;
font-size: 140%;
text-align: center;
text-decoration: initial;
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
box-shadow: .1em .2em .4em -.2em black;
box-sizing: border-box;
-webkit-transform: rotate(15deg);
-webkit-animation: rotate;
cursor: -webkit-zoom-in;
} :read-write {}

在Chrome中的效果如下图, 如你使用的是最新版的Chrome浏览器也可以点击这里,查看演示页面:

无前缀官方DEMO,使用prefixfree.js脚本后能达到同意的效果:

<script src="prefixfree.min.js" type="text/javascript"></script><!--引入prefixfree脚本-->
<style>
@keyframes rotate {
from { transform: rotate(15deg) }
to { transform: rotate(375deg) }
} .download {
position: absolute;
top: 2em;
left:1em;
width: 6em;
height: 6em;
padding: 1em 0;
background: #80A060;
background-image: linear-gradient(90deg, transparent, rgba(10,0,0,.3)),linear-gradient(transparent, transparent);
color: white;
line-height:;
font-size: 140%;
text-align: center;
text-decoration: initial;
text-shadow: .08em .08em .2em rgba(0,0,0,.6);
border-radius: 50%;
box-shadow: .1em .2em .4em -.2em black;
box-sizing: border-box;
transform: rotate(15deg);
animation: rotate;
cursor: zoom-in;
} :read-write {}
</style>

在Chrome中的效果如下图, 能达到使用前缀同样的效果,如你使用的是最新版的Chrome浏览器也可以点击这里,查看演示页面:

二,下面介绍Animatable 动画效果应用,该应用需与prefixfree脚本一起使用:

话不多说直接上截图吧:

是不是有种百花齐放的感觉呢!

下面是官方演示地址:

http://leaverou.github.io/animatable/

如网页响应慢的话,可以查看下面的演示的:

http://www.li-cheng.cn/demo/animatable-master/index.html

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

以下是源码介绍,:

function $(expr, con) { return (con || document).querySelector(expr); }
function $$(expr, con) { return [].slice.call((con || document).querySelectorAll(expr)); } var css = []; //遍历页面中 a标签中含有 data-property 属性的所有元素
$$('a[data-property]').forEach(function(el, i){
var property = el.getAttribute('data-property'),
from = el.getAttribute('data-from'),
to = el.getAttribute('data-to'); var id = property, i = 1; while(document.getElementById(id)) {
id = property + '/' + ++i;
} el.id = id;
el.href = '#' + id; el.title = property + ' from ' + from + ' to ' + to; var selector = '#' + id.replace(/([^\w-])/g, '\\$1'),
ident = id.replace(/([^\w-])/g, '-'); //创建css3样式代码,push到css数组中
css.push('@keyframes ' + ident + '{',
'from{' + property + ':' + from + '}',
'to{' + property + ':' + to + '}}',
selector + ' { animation: ' + ident + ' 1s infinite alternate;' + property + ':' + from + '}');
}); var style = document.createElement('style');
style.textContent = css.join('\r\n');
StyleFix.styleElement(style);
document.head.appendChild(style); //在页面中添加 style标签 setTimeout(onhashchange = function() {
var target = location.hash? $(location.hash.replace(/([^\w-#])/g, '\\$1')) : null; if(!target) {
document.body.className = 'home';
return;
} document.body.className = 'in-page'; var info = $('#info'),
previous = target.previousElementSibling,
next = target.nextElementSibling,
author = target.getAttribute('data-author') || 'leaverou'; $('h1', info).innerHTML = target.getAttribute('data-property');
$('dd:first-of-type', info).innerHTML = target.getAttribute('data-from');
$('dd:nth-of-type(2)', info).innerHTML = target.getAttribute('data-to');
$('dd:nth-of-type(3)', info).innerHTML = '<a href="http://twitter.com/' + author + '" target="_blank"><img src="http://twitter.com//api/users/profile_image?screen_name=' + author + '&size=mini"/>@' + author + '</a>'; $('a[title="Previous"]', info).setAttribute('href', '#' + (previous? previous.id : ''));
$('a[title="Next"]', info).setAttribute('href', '#' + (next? next.id : '')); setTimeout(function() {
if(2*target.offsetLeft + target.offsetWidth < innerWidth) {
info.style.left = target.offsetLeft + target.offsetWidth + 30 + 'px';
}
else {
info.style.left = target.offsetLeft - info.offsetWidth - 30 + 'px';
} info.style.top = target.offsetTop + 'px';
}, 10);
}, 50); onkeyup = function(evt) {
var key = evt.keyCode; switch (key) {
case 27:
location.hash = '';
break;
case 37:
case 38:
location.hash = location.hash? $('a[title="Previous"]').hash : $('a[data-property]:last-child').hash;
break;
case 39:
case 40:
location.hash = location.hash? $('a[title="Next"]').hash : $('a[data-property]:first-child').hash;
}
};

文章参考了如下地址,有兴趣的可以点击查看:

http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/

prefixfree官方地址:

http://leaverou.github.io/prefixfree/

Animatable官方地址:

http://leaverou.github.io/animatable/

如以上文章或链接对你有帮助的话,别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦,让更多的人阅读这篇文章。

作者:Li-Cheng
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS3无前缀脚本prefixfree.js与Animatable使用介绍的更多相关文章

  1. CSS3无前缀脚本prefixfree.js与Animatable使用

    现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...

  2. prefixfree.js_无前缀脚本

    prefixfree.js是JavaScript工具库,怎么用呢... 回答就是:哼!省去CSS3中的前缀“-moz”.“-webkit”.“-o”.“-ms” 省的在写一大堆前缀来适应旧版本浏览器或 ...

  3. HTML5/CSS3(PrefixFree.js) 3D文字特效

    之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...

  4. JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式

    JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...

  5. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  6. 详解CSS3属性前缀(转)

    原文地址 CSS3的属性为什么要带前缀 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀.这是为什么呢? 我的理解是,浏览器厂商以前就一直在实 ...

  7. 如何处理CSS3属性前缀(转载)总结

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  8. prefixfree.js介绍

    假如你现在正学习着强大的Css3,你知道Css3的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀.可能你默默忍受了,因为还没到统一的时间.有没想过给自己减下负,偶然间在网上看到一个js ...

  9. javascript性能优化:创建javascript无阻塞脚本

    javaScript 在浏览器中的运行性能,在web2.0时代显得尤为重要,成千上万行javaScript代码无疑会成为性能杀手, 在较低版本的浏览器执行JavaScript代码的时候,由于浏览器只使 ...

随机推荐

  1. Silverlight 预定义颜色速查表

    预定义颜色      可以使用 SolidColorBrush 绘制,它使用预定义纯色.这可以是 Colors 的静态属性 (Property) 名称,也可以是指定为 XAML 属性 (Attribu ...

  2. Python 之 Difflib

    Python 之 Difflib 2017年7月8日 word文档地址:https://wenku.baidu.com/view/36692440854769eae009581b6bd97f19237 ...

  3. 动态生成PictureBox控件,涉及:PictureBox控件和flowLayoutPanel面板

    一.概述 flowLayoutPanel面板是一系列控件的容器,有关详细的使用方法留待以后总结. 二.问题提出 问题提出:点击按钮,扫描指定文件夹并将其中的所有图片放在flowLayoutPanel面 ...

  4. 百度地图的js导入及使用

    做页面,地图可能会用到 1 导入百度地图的js库 <script type="text/javascript" src="http://api.map.baidu. ...

  5. noip2017d1t1

    我们知道因为a,b互质,ax+by=n若存在一组解(x0,y0),则(x0+kb,y0-ka)也是一组解,而我们要保证有正整数解的情况下n最大,我们不妨将x0设为最大的负整数-1,考虑最大的y0能为多 ...

  6. 关于Linux学习中的问题和体会

    本科期间未开展过与之相关的课程,所以初次接触Linux难免有些问题!参照老师给的学习资料中内容,逐步解决了一些问题,但还有一些问题没解决,下面列举出自己遇到的一些问题. 1.在环境变量与文件查找专题中 ...

  7. Android多线程操作sqlite(Sqlite解决database locked问题)(2)使用事务处理的效果

    问题场景描述: 在页面中用到了ViewPager控件,ViewPager中的内容分别是两个ListView,两个ListView的数据都来自本地数据库(先从网络下载数据,然后更新本地数据库),在实际的 ...

  8. DDL和DML的区别

    DML(data Manipulation Language)数据库操纵语言: 使用范围:对数据库中的数据进行一些简单的操作,如IDUS(增删改查) DDL(Data Definiton Langua ...

  9. bootstrap table 前端搜索

    1.bootstrap-table对于前端的搜索可以通过官网设置,但发现前端搜索出现bug,网上找到一个bootstrap-table的扩充js  bootstrap-table-mytoolbar. ...

  10. 控制uniFrame显示的一个管理类

    控制uniFrame显示的一个管理类 (2016-03-29 06:41:17) 转载▼ 标签: delphi 分类: uniGUI 利用uniGUI Frame的机制来搭建项目,是非常好的实现方式, ...