當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發布時間：2023/11/27 生活经验 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3无前缀脚本prefixfree.js与Animatable使用介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

要求

- 必備知識
  
  本文要求基本了解 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: 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腳本后能達到同意的效果：

<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: 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;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 出處:http://www.cnblogs.com/Li-Cheng/p/3631918.html 本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

轉載于:https://www.cnblogs.com/Li-Cheng/p/3631918.html

總結

以上是生活随笔為你收集整理的CSS3无前缀脚本prefixfree.js与Animatable使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jquery中如何以逗号分割字符串_百度
下一篇： “黄金何日赎蛾眉”上一句是什么

生活经验

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

要求

必備知識

運行環境

演示地址

一,下面說說如何使用prefixfree腳本:

?

?

二,下面介紹Animatable 動畫效果應用,該應用需與prefixfree腳本一起使用:

如以上文章或鏈接對你有幫助的話，別忘了在文章結尾處輕輕點擊一下 “還不錯”按鈕或到頁面右下角點擊 “贊一個” 按鈕哦。你也可以點擊頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。

總結