CSS3案例

Title

body{

margin:0;

}

div{

width:150px;

height:150px;

background: #ffb568;

font:30px/202px 'Arial';

color:red;

text-align: center;

margin: 0 auto;

border-radius:50%;

}

.yuan3{

display: none;

/*transition指的是變換，參數有變換時間，延遲時間，變化曲線，寬度高度顏色變化等*/

transition:1s;

}

.yuan2:hover~.yuan3{

display: block;

background: #3fb8ff;

}

.yuan3:hover{

display:block;

}

.yuan5{

/*opacity是不透明度*/

opacity: 0;

width:0;

height: 0;

/*transition寫在這里才是.yuan5常有的屬性，無論出現還是消失都會有動畫的效果*/

transition:1s;

overflow:hidden;/*如果圓圈中的數字超過區域就隱藏*/

}

.yuan4:hover~.yuan5{

/*如果將transition寫在這里的話，只有當鼠標懸停在.yuan4上的時候才會有效果，

當鼠標移出.yuan2的區域時，因為不出發hover的條件，所以消失的時候就沒有變化效果了，

結果就是瞬間消失*/

opacity: 1;

width:150px;

height: 150px;

background: #43ff0b;

}

.yuan5:hover{

opacity: 1;

width:150px;

height: 150px;

background: #43ff0b;

}

123456

transition

可以設置顏色，寬度，高度，變化曲線等的變化；

如果需要實現從無到有的動畫變化，那個兩個值就要存在一個中間值，比如0和1；而none和block就沒有中間值，所以這個變化就不能以動畫的形式呈現出來，只能實現一瞬間的變化。

opacity

設置不透明度，0表示透明，但是區域還占有位置。

如果要實現僅僅是高度的動畫效果，那么就要使寬度固定，position-property:all

總結

以上是生活随笔為你收集整理的css3鼠标果果变手型代码_css3 鼠标悬浮动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。