要求
-
必備知識
本文要求基本瞭解 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/
如以上文章或連結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。