嘗試用css寫了個箭頭效果
思路就是通過span和span子元素i分別通過設定他們的偽元素構造兩個箭頭,但是i構造的箭頭兩條線height都是0,hover的時候漸近的動畫效果就是i箭頭的高度變化而來的,還有rotate相同的角度
css3知識：
jsfiddle demoformal syntax: [ none | ] || || ||transtion-property拿張鑫旭老師部落格列出的參考下css3 transition-property使用參考指南
(transform也可當作transtion-property)
開始有個箭頭旋轉的時候設定transform-origin理解有點繞(就是突然覺得自己不會幾何旋轉了...2333)
後來畫了下座標清晰了，基點(0,0,0)就是原點,預設值是（50%, 50%, 0）,就是平面的中點.
-webkit-transform-origin: 50% 70%;
transform-origin: 50% 70%;
需要注意的是
content即使為''也必須有這個屬性
偽元素是作為附屬元素的子元素存在,比如下面**它們都是i的子元素
.block-arrow .prev i::before,
.block-arrow .prev i::after
利用css3實現箭頭
在一些開發中，經常會用到一些箭頭，如圖所示 要實現圖上的搶這個箭頭，傳統的做法就是切一張這樣的，然後最為背景圖就行了。但考慮到節約載入資源以及css3的強大特性，我們完全可以用css3來實現如圖需求。class info r class btn 搶span div info r 這樣就可以了。利用這...
css3 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...