css過渡動畫

標籤：動態   hit   角度   過渡動畫   設定   tty   漸層   matrix   back   

具體代碼：
1、水平翻轉
-moz-transform:scale(-1，1);
-webkit-transform:scale(-1，1);
-o-transform:scale(-1，1);
transform:scale(-1，1);
filter:FlipH;

2、垂直翻轉
-moz-transform:scale(1，-1);
-webkit-transform:scale(1，-1);
-o-transform:scale(1，-1);
transform:scale(1，-1);
filter:FlipV;

3、順時針旋轉90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;

傾斜
transform:skew(20deg);

{ -moz-transform:rotate(720deg); -webkit-transform:rotate(720deg); -o-transform:rotate(720deg); transform:rotate(720deg); transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; -o-transition:all 0.4s linear;}

陰影動畫
<style>
.box { position: relative; left:10px; top:20px; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out; }
.box::after { content: ‘‘; position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.6); transition: all 0.3s ease-in-out;}
.box:hover::after{ opacity:1;}
.box:hover{ left:20px; top:40px; transform: scale(1.2, 1.2); transition: all 0.3s ease-in-out;}
</style>
<div class="box"></div>

IE濾鏡特性：

Alpha 透明效果
Blend Trans 漸隱漸現需結合javascript
Blur 動態模糊
Chrome 透明色效果
DropShadow 投影效果
FlipH 水平翻轉
qlow 光暈效果
Gray 濾色效果
Invert 底片效果
FlipV 垂直效果
Light 燈光效果需結合javascript
Mask 遮罩效果
RevealTrans 映像轉場效果產生百葉窗、溶解等動態效果需結合javascript
Shadow 陰影製作效果
Wave 波浪效果
X-ray X光片效果

 

rotate

設定元素順時針旋轉的角度，用法是：

transform: rotate(x);

參數x必須是以deg結尾的角度數或0，可為負數表示反向。

scale

設定元素放大或縮小的倍數，用法包括：

transform: scale(a); 元素x和y方向均縮放a倍

transform: scale(a, b); 元素x方向縮放a倍，y方向縮放b倍

transform: scaleX(a); 元素x方向縮放a倍，y方向不變

transform: scaleY(b); 元素y方向縮放b倍，x方向不變

translate

設定元素的位移，用法為：

transform: translate(a, b); 元素x方向位移a，y方向位移b

transform: translateX(a); 元素x方向位移a，y方向不變

transform: translateY(b); 元素y方向位移b，x方向不變

skew

設定元素傾斜的角度，用法包括：

transform: skew(a, b); 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b

transform: skewX(a); 元素x方向逆時針傾斜角度a，y方向不變

transform: skewY(b); 元素y方向順時針傾斜角度b，想方向不變

以上的參數均必須是以deg結尾的角度數或0，可為負數表示反向。

matrix

設定元素的變形矩陣，因為矩陣變形過於複雜，暫略。

origin

設定元素的懸掛點，用法包括：

transform-origin: a b; 元素的懸掛點為(a, b)

元素的懸掛點即為它旋轉和傾斜時的中心點。取值中的a、b可以是長度值、以%結尾的百分比或者left、top、right、bottom四個值。

 

過渡效果
transition-property: width;
transition-duration: 2s;
圓角：border-radius:2px;
陰影：box-shadow:1px 1px 2px #FFF;

 

css漸層背景
background:-webkit-gradient(linear,left top,right bottom,color-stop(0,#972D20),color-stop(1,#A92400));
background:-moz-linear-gradient(left, #972D20, #A92400);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=‘#972D20‘,endColorStr=‘#A92400‘,gradientType=‘1‘);

 

圖片動畫
@keyframes aabb {
0% {
transform: rotate(0deg);
border:5px solid red;
}
50% {
transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
@-webkit-keyframes aabb {
0% {
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50% {
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading {
border: 5px solid black;
border-radius: 40px;
width: 28px;
height: 188px;
animation: aabb 2s infinite linear;
-webkit-animation: aabb 2s infinite linear;
margin: 100px;
}

animation:load 0.6s steps(12, end) infinite; -webkit-animation:load 0.6s steps(12, end) infinite;

css過渡動畫