天天看點
傳回

ccs3動畫效果ccs3動畫效果

ccs3動畫效果

1. transition過渡？

transition-property : 規定設定過渡效果的CSS屬性的名稱。

all ( 預設值 ) , 指定 width , height;

transition-duration : 規定完成過渡效果需要多少秒或毫秒。

需要添加機關：s (秒) ms (毫秒) 1s == 1000ms

transition-delay : 定義過渡效果何時開始。

2s : 延遲兩秒進行過渡

-2s : 提前兩秒進行過渡

transition-timing-function : 規定速度效果的速度曲線。

運動形式：加速、減速、勻速…

linear

ease（預設值）

ease-in

ease-out

ease-in-out

cubic-bezier

（ http://cubic-bezier.com ）

複合寫法：

transition:all 2s linear; √

transition:linear 2s all; √

transition:2s linear all; √

注意：當總時間與延遲時間同時存在的時候，就有順序了，第一個是總時間，第二個是延遲時間。

transition:2s 3s linear all; √

注意：不要把transition放到hover中

2. transform變形？

translate : 位移

transform:translate(100px,100px); : 兩個值 分别對應 x 和 y。

transform:translateX(100px);

transform:translateY(100px);

transform:translateZ(100px); ( 3d )

scale : 縮放

transform:scale(num) num是一個比例值，正常比例是1。

transform:scale(num1 , num2) 兩個值 分别對應 w 和 h

transform:scaleX()

transform:scaleY()

transform:scaleZ() ( 3d )

<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{ width:100px; height: 100px; background:red;
    transition-duration : 2s;
    transition-timing-function: linear;

}
#box:hover{ width:200px; height: 200px; background: blue;}

</style>
</head>
<body>
<div id="box"></div>
 <div id="box2"></div>
 </body>
  </html>

rotate : 旋轉

transform:rotate(num) num是旋轉的角度 30deg

正值：順時針旋轉

負值：逆時針旋轉

表示一個角：角度deg 或 弧度rad

rotateX() ( 3d )

rotateY() ( 3d )

rotateZ()

注 : rotate()跟rotateZ()是等價關系。

skew : 斜切

transform:skew(num1,num2) : num1和num2都是角度，針對的是x 和 y

transform:skewX()

transform:skewY()

注：skew沒有3d寫法。

注：所有的變形操作，都不會影響到其他元素。(類似于相對定位)

注：變形操作對inline(内聯元素)不起作用的。

注：transform可以同時設定多個值。

先執行後面的操作，在執行前面的操作。

位移會受到後面要執行的縮放、旋轉和斜切的影響。

3. tranform-origin 基點位置 ?

主要是針對 旋轉和縮放，預設都是中心點為基點。

4. animation動畫？

原理：逐幀動畫。會把整個運動過程，劃分成100份。

animation-name : 設定動畫的名字 (自定義的)

animation-duration : 動畫的持續時間

animation-delay : 動畫的延遲時間

animation-iteration-count : 動畫的重複次數 ，預設值就是1 ，infinite無限次數

animation-timing-function : 動畫的運動形式

ease linear

@keyframes 動畫的名字 {

from {}

to {}

}

from : 起點位置 , 等價于 0% to : 終點位置 ，等價于 100%

注：預設情況下，元素運動完畢後，會停到起始位置。

複合樣式：

1 . animation

播放之前或之後，其動畫效果是否可見。

none (預設值) : 在運動結束之後回到初始位置，在延遲的情況下，讓0%在延遲後生效

backwards : 在延遲的情況下，讓0%在延遲前生效

forwards : 在運動結束的之後，停到結束位置

both : backwards和forwards同時生效

animation-direction : 屬性定義是否應該輪流反向播放動畫。

alternate : 一次正向(0%100%)，一次反向(100%0%)

reverse : 永遠都是反向 , 從100%~0%

normal (預設值) : 永遠都是正向 , 從0%~100%

2 . animate.css ?

一款強大的預設css3動畫庫。

官網位址：https://daneden.github.io/animate.css/

基本使用：

animated : 基類(基礎的樣式，每個動畫效果都需要加)

infinite : 動畫的無限次數

如果想改變運動的時間：需要在css檔案中改變animated這個樣式裡的時間。

3. 3D效果？

perspective(景深) : 離螢幕多遠的距離去觀察元素，值越大幅度越小。

3D的眼鏡

rotateX

rotateY

translateZ

scaleZ

注：回報回來的立體，僅限于平面。

transform-style : 3D空間

flat (預設值2d)、preserve-3d (3d，産生一個三維空間)

注：隻要是有厚度的立體圖形，就必須添加3D控件。

注：在立方體中預設會沿着第一個面進行旋轉。

tranform-origin : x y z; (z不能寫單詞，隻能寫數字)

perspective-origin : 景深-基點位置，觀察元素的角度。

backface-visibility : 背面隐藏

hidden、visible (預設值)

3d寫法( 擴充學習 )

scale3d() : 三個值 x y z

translate3d() : 三個值 x y z

rotate3d() : 四個值 0|1(x軸是否添加旋轉角度) 0|1(y軸是否添加旋轉角度) 0|1(z軸是否添加旋轉角度) deg

rotate3d(1,1,1,30deg);

scale translate skew

斜切導航 

<!DOCTYPE html>
 <html >
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ margin:0; padding:0;}
ul{ list-style:none;}
#nav{ width:415px; overflow: hidden; margin:100px;}
#nav ul{ width:440px;}
#nav ul li{ float:left; width:100px; height:30px; background:red; color:white;
    text-align: center; line-height: 30px; margin-right: 5px;
    transform: skew(-30deg , 0);
}
#nav ul span{ transform: skew(30deg , 0); display: block;}
#nav ul li:first-of-type{ margin-left:-10px; padding-left:10px;}
#nav ul li:last-of-type{ padding-right:20px;}
</style>
 </head>
 <body>
<div id="nav">
    <ul>
        <li><span>首頁</span></li>
        <li><span>聯系我們</span></li>
        <li><span>歡迎光臨</span></li>
        <li><span>先生慢走</span></li>
    </ul>
</div>
</body>
</html>

扇子動畫 

<!DOCTYPE html>
<html >
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ margin:0; padding:0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color:#646464;}
h1,h2,h3,h4{ font-size:14px;}
body{ font-size:14px; color:#9f9f9f; font-family: Arial , 微軟雅黑;}
.l{ float:left;}
.r{ float:right;}
.clear:after{ content:""; display: block; clear:both;}

ul{ width:500px; height:500px; border-bottom: 1px black solid; margin:20px auto; position: relative;}
ul li{ width:40px; height:200px; border:1px red solid; position: absolute; bottom:0; left:50%; margin-left:-20px; transition: 1s; transform-origin: center bottom;}

ul:hover li:nth-of-type(1){ transform:rotate(-90deg); background: red;}
ul:hover li:nth-of-type(2){ transform:rotate(90deg); background: red;}
ul:hover li:nth-of-type(3){ transform:rotate(-67.5deg); background: blue;}
ul:hover li:nth-of-type(4){ transform:rotate(67.5deg); background: blue;}
ul:hover li:nth-of-type(5){ transform:rotate(-45deg); background: green;}
ul:hover li:nth-of-type(6){ transform:rotate(45deg); background: green;}
ul:hover li:nth-of-type(7){ transform:rotate(-22.5deg); background: hotpink;}
ul:hover li:nth-of-type(8){ transform:rotate(22.5deg); background: hotpink;}
</style>
 </head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

202逆戰班

css css3 html 3d
上一篇: 數組元素的預設初始化值
下一篇: HFS 通路速度慢

繼續閱讀