一,transform四種簡單動畫:(1),旋轉動畫
/* 旋轉,正值為順時針 */
transform: rotate(100deg);
/* 整個元素沿著中心點的x軸旋轉 逆時針*/
transform: rotatex(30deg);
/* 整個元素沿著中心點的y軸旋轉 逆時針 */
transform: rotatey(30deg);
/* 整個元素沿著中心點的z軸旋轉 會按照中心點旋轉 順時針*/
transform: rotatez(30deg);
/* 前面對應的數字無數字大小區別,只有正負區別,正則依然逆時針,負數則順時針 */
transform: rotate3d(10,0,0,30deg);
(2),平移動畫
/* 沿著中心點向z軸方向平移 */
transform:translatez(100px);
/* 沿著中心點向x軸方向平移 */
transform:translatex(100px);
/* 沿著中心點向y軸方向平移 */
transform:translatey(100px);
(3),擠壓扭曲
/* 跟x軸平行的兩條邊依然平行,但是這兩條邊逐漸分開 */
transform: skewx(30deg);
/* 跟y軸平行的兩條邊依然平行,但是這兩條邊逐漸分開 */
transform: skewx(30deg);
/* 如果兩個值都改動,則沒有啥平行的,兩邊尖角等於90-x-y的度數 */
/* 如果x+y的值大於90,則整個元素消失 */
transform: skew(30deg,30deg);
(4),縮放動畫
/* 縮放,scale(0.2,2) 水平縮小為初始的0.2倍,垂直放大為初始值的兩倍*/
transform: scale(0.8,1.5);
(5),透視效果
/* 透視距離 800-2000之間 不用加單位*/
perspective: 300;
二,複雜的animation動畫封裝
(1),寫進乙個屬性裡面(常用)
/* 動畫總屬性:動畫名 時間 運動函式 */
animation: move 3s ease;
(2),動畫名稱:自定義動畫名稱aa bb cc
animation-name: move;
animation-duration: 5s;
(4),定義動畫最後一幀:backwards forwards both
animation-fill-mode: both;
(5),延遲執行的時間,不寫預設為0s
animation-delay: 1s;
(6),動畫執行的次數:0-5 或者infinite無限次數
animation-iteration-count: 2;
(7),動畫是否交替運動:預設為normal,無效果;alternate,交替執行
animation-direction: normal;
(8),運動方式:linear,勻速運動;ease,勻加速運動;cubic-bezier(),貝塞爾曲線,可填不同值;
/* 運動方式 勻速 加速 貝塞爾 */
animation-timing-function: ease-in;
(9),暫停動畫,可加於劃過偽類選擇器中體現:running執行,paus暫停
div:hover
(10),必不可少的封裝動畫
@keyframes move
to */
0% 100% }
三,多列布局
記住3個常用的屬性即可
(1),column-count:3;可以分成3欄(必須含有中文)
div
(2),分欄直接的間隙可以通過屬性設定column-gap
div
(3),列與列之間的邊框的樣式column-rule-style: solid;
div
分列屬性表
屬性 描述
column-count 指定元素應該被分割的列數。
column-fill 指定如何填充列
column-gap 指定列與列之間的間隙
column-rule 所有 column-rule-* 屬性的簡寫
column-rule-color 指定兩列間邊框的顏色
column-rule-style 指定兩列間邊框的樣式
column-rule-width 指定兩列間邊框的厚度
columns 設定 column-width 和 column-count 的簡寫
display: flex;
flex-direction: row;
justify-content: space-between;
align-items:center;
flex-wrap:wrap;
align-content: space-around;
未完待續...
CSS3轉換和動畫
2d轉換 transform屬性 屬性值有 translate 平移，單位px rotate 旋轉，單位deg scale 縮放，給定倍數 skew 翻轉，根據x軸，y軸，單位deg matrix 函式式，自定義 3d轉換 transfrom屬性 屬性值rotatex 單位deg rotatey 單...
css3 轉換 旋轉 過渡 動畫
css3 轉換 旋轉 過渡 動畫 轉換 transform 轉換 translate x,y 位移 translatex 設定水平方向位移 translatey 設定垂直方向位移 旋轉 rotate 旋轉 transform rotate 45deg scale 縮放 transform scale...
筆記 CSS3轉換
1.旋轉 rotate 通過指定的角度引數對原元素指定乙個2d旋轉 語法 transform rotate angle angle 旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉 2.移動 translate 根據左 x 和頂 y 位置給定的引數，從當前元素位置移動 1 translatex 語法...