css3 滑鼠:hover效果會平滑過渡,但滑鼠離開,效果消失的太生硬,能不能和:hover一樣平滑過渡?
01-16
&
& & & && &
& & &http://www.baidu.com" class="a"> & & &http://www.baidu.com" class="b">
&設計師& & &
transition 寫在 .b 的規則里就好了……
你寫在 .abc:hover .b 裡面
滑鼠移上去的時候,觸發了 .abc:hover ,這個時候 .b 才具有了 transition 屬性,此時 .b 的屬性變化就有了過渡效果。
滑鼠移開的時候, .abc:hover 不再被觸發, .b 的 transition 屬性這個時候已經被去掉了,所以這個時候 .b 的屬性發生變化的時候( .abc:hover .b &>&> .b)就不再過渡,而是變成了沒有 transition 的時候的突變了
---
一般 要讓屬性變化有過渡的話就不要把 transition 寫在偽類上面……在b里再加一個transition,像這樣:.b{transform: translate(0,0);transition:all .2s ease-in 0s;}
第一次用手機回答 就給你了。其實過渡這個屬性,本身是會將元素的屬性變化都包含進去的,所以是最開始就可以聲明的。並不是像其他屬性一樣,當發生變化的時候去聲明。那樣做會重新計算過渡時機,不符合做過渡的初衷。
概念搞清楚了,這樣就不會有問題了。
很明顯你的transition加錯地方了,應該這樣:
.b {
....
transition:.....;
....
}
.b{
...
transition: all 1s linear;
...
}
推薦閱讀:
※CSS3 的按鈕怎麼快速實現樣式?
※三個div都做浮動,給第二個div加上clear:both為什麼右邊的還是在本行浮動?(clear:right無效)
※什麼樣的CSS 代碼算是優雅的、高效的?如何寫出這樣的 CSS?
※css3動畫如何讓元素一開始是隱藏的?
※為什麼input不支持偽元素(:after,:before)?
TAG:CSS3 |