自從css3引入了動畫（transition和@keyframes，還有與之搭配的transform）之後，各路人馬對它的熱情都極為高漲，和js動畫相比，它寫起來更簡單（在沒有jquery庫的情況下），同時在大多數情況下效能上也有很強的優勢。transition和transform相對比較簡單，除了矩陣變換（一般人也用不到）之外，別的都易學好懂，而使用了@keyframes的動畫，簡直就是設計師和工程師的大殺器，關於這東西有多殺，可以參考之前騰訊的大神們搞的乙個css3動畫幀數科學計算法這樣的玩意兒，內含計算器一枚，內文之糾結複雜，我相信一般兼職半個前端的大設計或者初入行的小前端都是難以看懂的…
而且其實主要問題是，那玩意兒是為步進動畫準備的，做一張精靈圖，然後每隔一定時間跳一張…其實這樣算不上乙個真正的css動畫，何況animation屬性中的steps()功能可以比較好地解決這個問題。而一直以來，都沒有乙個好的css動畫生成工具（別跟我提muse，它需要閱讀《工具的自我修養》…）所以今天我想推薦的就是這個stylie，乙個視覺化自動生成css3動畫的工具。
stylie操作簡介
頁面開啟以後很簡單，藍色的網格背景上面，兩個綠色的十字中間連著一根黃色的線，上面有乙個白色小球不斷地從左邊滑動到右邊（還稱不上滾動），下面有乙個進度條，右邊有乙個操作面板。
來自tuts+
keyframes標籤面板
第乙個0ms處表示www.cppcns.com起點相關資訊，第二個2000ms處表示2000ms處斷點的相關資訊；
2000ms可以單擊修改它的時間，單擊右上角的加號可以新增新的斷點
x和y分別表示橫座標及縱座標（其實你也可以用滑鼠去拖綠色的十字…）；
s表示縮放倍率（預設是1）；
rx、ry、rz分別表示物體沿x、y、z軸的旋轉角度（具體哪個軸是哪個可以在上面填寫數字自己嘗試，出於便於觀察的理由建議填寫180。當然你也可以按住shift鍵，拖，但是我覺得這樣很不好控制&hewww.cppcns.comllip;）；
linear表示線性的…這一欄是自定義緩動曲線（easing curves）
緩動曲線
這個工具比較流弊刷刷的一點就在於它的緩動曲線功能，所有的數值，都！可！以！定義緩動。下面我稍微說一下它的緩動：
後面的就沒什麼了，最後乙個為customeasing，這個曲線可以自己在motion選項卡中編輯，經常用ai的童鞋可能比較容易編輯，但是不理解曲線跟運動速度之間的關係的話，就根本搞不懂自己在編輯什麼…
上面說了那麼多曲線…它其實代表的就是乙個速率的變化（可以把起點和終點放在非水平或垂直的同一條直線位置上，然後改變x和y的easing curves，本質上它和我們初高中物理課上畫的那些撞車線拋物線沒什麼不同…）。對於那些想預覽簡單微小動效的人來說，可以把起點和終點放在比較近的位置上，然後改變easing curves察看效果。
匯出**
效果滿意之後，就可以點選css和html標籤分別複製**了。
css標籤中可以為這個動畫自定義名字，並選擇瀏覽器相容性（預設為w3c，如果你家要考慮相容其實還不如不要做（對我說的就是那誰，你們懂）&hel程式設計客棧lip;相容手機的話可以考慮勾上webkit）。orient generated css to的意思是說所有的位移資料採用相對（第一幀的）位移，還是絕對定位（相對於左上角）。最下面的滑塊，最左邊是最少**，右邊是最高質量，最小**可能會在某些情況下引發意想不到的問題，但是通常情況下沒啥事…
html標籤就沒啥東西了，你可以修改其中的html**來檢視你自定義的內容效果（預設只有乙個，就是那個白色的圓…）
最後在右邊的扳手標籤裡，你可以選擇儲存或讀取你的動畫。
差不多就是這樣了，這個神器基本上可以解決現有所有的css動畫需求，具體怎麼做就看各人的實力運氣了。
本文標題: 超實用！視覺化css3動畫生成神器stylie
本文位址: /news/exp/55081.html
CSS3 視覺化的格式模型
在這個模型裡，文件樹上的每乙個元素都會生成零個，乙個或者多個盒子 根據盒子模型 這些盒子的布局由以下內容決定 本章和下一章定義的屬性同樣適用於連續類 continuous media 和頁面類 paged media 當然，對於頁面類 來說，margin屬性有些不一樣。視覺化格式模型沒有指定關於格式...
CSS3扁平化Loading動畫特效
效果預覽 如下 doctype html html head meta charset utf 8 title css3旋轉載入效果 何問起 title style body container canvas spinner 1 starts here spinner1 spinnermax spi...
CSS3扁平化Loading動畫特效
效果預覽 如下 doctype html html head meta charset utf 8 title css3旋轉載入效果 何問起 title style body container canvas spinner 1 starts here spinner1 spinnermax spi...