CSS3无前缀脚本prefixfree.js与Animatable使用介绍-白红宇

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

阅读量：2222 次

发布时间：2019-05-08

本文共 5597 字，大约阅读时间需要 18 分钟。

要求

- 必备知识
  
  本文要求基本了解 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”呢，需要使用脚本来实现。

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

下面是官方网站截图:

那么如何使用该脚本呢?下面是截至官网的两个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: 1;   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脚本后能达到同意的效果：

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

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

话不多说直接上截图吧:

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

下面是官方演示地址:

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

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 = '@' + author + '';        $('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/

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

作者:

出处:

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

转载于:https://www.cnblogs.com/Li-Cheng/p/3631918.html

你可能感兴趣的文章

要求

必备知识

运行环境

演示地址

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

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

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

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