原碼在最上鏈結可以看到,不過依舊對新手不夠友好.自己也對demo進行了略微的更改,還是介紹一下思路再**例項,最後證明,數學基礎與思想很重要,通過幾何分析便可以輕鬆通過簡單圖形疊加實現複雜的動畫.
首先來看這個demo分為兩層,第一層為中間乙個透明帶邊框的圓形,第二層為三個旋轉的齒輪,也是demo的重點.上下層可以通過z-index來實現.
三個齒輪也都是相同原理只是大小顏色不同實現乙個即可複製實現另外兩個.
分析一下這個齒輪也不難,是由三個圓角的正方形旋轉疊加後的結果,中間疊加乙個白色的圓形即可,將所有形狀包含在乙個div裡面,旋轉總的div即可實現總體旋轉.
圖一為乙個正方形,圖二為兩個正方形疊加,圖三為三個.
圖一:圖二:圖三
實現這個並不困難,圓角border-radius
,角度旋轉transform:rotate(60deg).
xianzai
此時會發現,後面的帶position:absolute的屬性元素會自動覆蓋重複位置的前面的absolute的元素,就像是設定了z-index屬性一樣,同樣也可以實際設定z-index來強制前面的absolute元素在上層顯示.
同時,由於是loading的demo,完全可以將所有元素設定position:absolute,但是在常規網頁布局中一定要慎用absolute,
這個demo中absolute居中的方式與昨天demo中不一樣,今天提供了一種新的,對比一下
第一種: 第一種是設定div左角的point點向上向左移動元素對應邊一般的距離.
divdiv
@import url(
/* variables */
/* mixins */
body
body .loader
body .loader_overlay
body .loader_cogs__top
body .loader_cogs__top div.top_part
body .loader_cogs__top div:nth-of-type(1)
body .loader_cogs__top div:nth-of-type(2)
body .loader_cogs__top div:nth-of-type(3)
body .loader_cogs__top div.top_hole
@keyframes rotate
to }
純css3 載入loading動畫特效
最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...
純css3 載入loading動畫特效
最近專案中要實現當頁面還沒有載入完給使用者提示正在載入的loading，本來是想做個提示的，但是如果放大電腦的解析度就會感覺到很虛，體驗效果很不好。於是就採用css3 js實現這個loading的動畫效果，最終在我們前端工程師的幫助之下完成。所以記錄在這裡，如果感興趣的朋友也可以看看，大家互相焦爐學...
純CSS3實現的8種Loading動畫效果
效果如圖 html 部分 所有效果共用 複製 如下 載入中.我們從左到右從上到下列出效果對應的css 1 效果css 複製 如下 load1 loader,load1 loader before,load1 loader after load1 loader before,load1 loader ...