1、使用 SVG 製作單選和多選框動畫
通過 JavaScript 實現 SVG 路徑動畫,我們可以做很多花哨的東西。今天我們要為您介紹一些核取方塊和單選按鈕效果。實現的主要思路是隱藏原生的輸入框,使用偽元素創造更具吸引力的樣式,輸入框被選中的時候執行 SVG 動畫。
2、30種奇妙的滑鼠懸停效果
總共分為兩組,多達30種不同的風格。為了讓效果儘可能的平滑,最好不要在元素上使用變換以免影響佈局。第二組效果中採用了 SVG 動畫,這也是目前比較流行的方式。
3、超炫的 CSS3 頁面切換動畫效果
今天我們想與大家分享一組創意的頁面切換熊效果集合。我們已經在示例中羅列了一組動畫,可以被應用到頁面切換過程中,創造出很有趣的導航效果。
4、網頁邊欄過渡動畫
以細微的過渡動畫顯示一些隱藏的側邊欄,其餘的內容也是。通常側邊欄滑入,把其他內容推到一邊。這個可過程中可以加入很多微妙而奇特的效果。
5、使用 CSS3 實現 3D 圖片滑塊效果
使用 CSS3 的3D變換特性,我們可以通過讓元素在三維空間中變換來實現一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊外掛,利用了 3D transforms(變換)屬性來實現多種不同的效果。
6、使用 CSS3 製作網格動畫效果
今天我們想與大家分享一個小的動畫概念。這個夢幻般的效果是在馬庫斯·埃克特的原型應用程式裡發現的。實現的基本思路是對網格專案進行 3D 旋轉,擴充套件成全屏,並呈現內容。
7、超炫的核取方塊(Checkbox)效果
核取方塊(Checkbox)在各個瀏覽器中的效果不一致,因此很多 Web 開發人員會自己重新設計一套介面和使用體驗都更佳的核取方塊功能。
8、超炫的核取方塊(Checkbox)效果
通過 CSS3 的新特性,我們創作出好的互動和效果的可能性大大增加。這篇文章中,我想與大家分享一些 CSS3 動畫按鈕效果。我們的想法是建立一個具有不同風格的一些動畫連結元素,滑鼠懸停時有動畫效果和活動狀態。
9、三種風格的全屏幻燈片效果
這個幻燈片效果是由四個區域的獨立移動構成,通過畫面分割,同時顯示出新的圖片。這裡需要組合使用 CSS3 的3D轉換、過渡和動畫功能。
10、動感的頁面載入動畫效果
這個效果的核心是讓一個形狀在頁面視窗中動畫顯示並有展示活動的指示。當新內容被載入時,形狀將以動畫顯示返回顯示的頁面。我們將使用 Snap.svg 動畫庫來實現,因為這個庫讓我們能夠建立複雜的形狀和有趣的變形轉換效果。
11、奇特的網格載入效果
向您展示瞭如何使用 Masonry 網格砌體外掛,結合 CSS 動畫重現這種效果。另外在這裡,我們還藉助了 ColorFinder 來獲得的影象的最突出的顏色來作為初始的載入背景色使用。
12、使用 CSS3 製作網格動畫效果
今天我們想與大家分享一個小的動畫概念。這個夢幻般的效果是在馬庫斯·埃克特的原型應用程式裡發現的。實現的基本思路是對網格專案進行 3D 旋轉,擴充套件成全屏,並呈現內容。
相關閱讀
評論(1)