今天我們使用css3實現以下開門動畫，首先我們來看一下效果圖
接下來我們來實現一下這個效果
先進行布局，布局的實現由很多種，這裡我們需要position和float進行布局，首先先把門放到正**，我們可以利用以下**實現
width
: 300px;
height
: 300px;
position
: absolute;
top: 50%;
left
: 50%;
margin-left
: -150px;
margin-top
: -150px;
下來就可以設定背景，設定左右門了，門的div和左右門的div是父子結構，我們只需要對左右門設定了左浮動，因為我們需要給左右門的右邊和左邊設定邊框，使其呈現門縫效果，因此我們需要把左右門設定成盒子模型即box-sizing:border-box
box-sizing
:border-box;
float
:left;
div.left_door
div.right_door
div.door:hover div.left_door
div.door:hover div.right_door
至此我們的效果就出現了，下面是源**
*
ul/*門裡面*/
div.door
/*左門/右門*/
div.left_door,
div.right_door
div.left_door
div.right_door
/*門把手*/
div.left_door ul li,
div.right_door ul li
div.left_door ul li,
div.right_door ul li
div.left_door ul li
/*使用css變形功能*/
div.door:hover div.left_door
div.door:hover div.right_door
"door">
"left_door">
"right_door">
css3的動畫實現
關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...
css3的動畫實現
關鍵幀 keyframes 動畫名稱20 40 60 80 100 1 animation name 定義乙個或者多個動畫的名稱 eg demo 2 animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執...