先看看效果，像是彈簧在伸縮：
具體**：
此處用到css3的transform屬性。
css3的變形（transform）屬性讓元素在乙個座標系統中變形。這個屬性包含一系列變形函式，可以移動、旋轉和縮放元素。
transform屬性可用於內聯元素和塊元素。其預設值為none，表示不元素不進行變形。transform另乙個屬性值是一系列的。表示乙個或多個變形函式，以空格分開；我們可以同時對乙個元素進行變形的多種屬性操作，如rotate、scale、translate等。以往我們疊加效果都是用逗號(「，」)隔開，但在transform中使用多個transform-function時卻需要有空格隔開。
● 2d transform常用的transform-function的功能:
transform屬性3d變形（3d transform）模組的一部分，也就是說所有的2d變形函式也包含於3d變形規範中。如此一來，css3變形中的函式根據不同的規範略有不同，下面列出的是變形中的2d和3d常用變形函式的功能，簡單說明如下：
translate()：用來移動元素，可以根據x軸和ｙ軸座標重新定位元素位置。在此基礎上有兩個擴充套件函式：translatex()和translatey()。
scale()：用來縮小或放大元素，可以使用元素尺寸發生變化。在此基礎上有兩個擴充套件函式：scalex()和scaley()。 rotate()：用來旋轉元素。
skew()：用來讓元素傾斜。在此基礎上有兩個擴充套件函式：skewx()和skewy()。
matrix()：定義矩陣變形，基於x軸和y軸座標重新定位元素位置。
● 3d transform常用的transform-function的功能:
translate3d()：移元素元素，用來指定乙個3d變形移動位移量。
translate()：指定3ｄ位移在ｚ軸的位移量。
scale3d()：用來縮放乙個元素。
scalez():指定z軸的縮放向量。
rotate3d()：指定元素具有乙個三維旋轉的角度。
rotatex()、rotatey()和rotatez()：讓元素具有乙個旋轉角度。
perspective()：指定乙個透視投影矩陣。
matrix3d()：定義矩陣變形。
● transform-origin屬性用來設定變換的原點。示例中代表旋轉中心。
css code複製內容到剪貼簿
qreqplvc
本文標題: css實現彈簧效果的旋轉載入動畫
本文位址:
CSS3實現載入效果
預期實現的效果如下如所示 首先基本的html布局如下 對於的css 如下 首先設定一下基本的樣式 wrap wrap div 完成上面的css樣式定義後，頁面上就會有五個排列整齊的小細條了。然後我們來新增動畫效果 在 wrap div加入如下 webkit animation fadeout 1s ...
純css實現超炫的載入動畫效果
最近看了一下前端的相關技術，實現了乙個純css實現的動畫效果，非常有意思，採用的是css3的相關知識。主要用的是 keyframes 和 animation兩個知識點，量非常小。話不多說，直接上 啦。html 非常的簡單，就是兩層div的巢狀 接下來是css body loading obj obj...
CSS 實現載入動畫之五 光碟旋轉
原文 css 實現載入動畫之五 光碟旋轉 1.先看截圖 2.實現思路 2.1 首先還是定義四個元素，元素的中心為這四個元素組成的圓的圓心。這樣定義的目的可以保證元素拼湊成乙個正圓。2.2 在單個元素的頭尾各定義乙個子元素，子元素旋轉一定的角度，使其平行排列，中間剛好留乙個正圓的位置。這裡用了rota...