CSS3實現(xiàn)偽類hover離開時平滑過渡效果示例
發(fā)布時間：2017-08-10 16:33:45 作者：NoHeroes 
我要評論
我要評論本篇文章主要介紹了CSS3實現(xiàn)偽類hover離開時平滑過渡效果示例，具有一定的參考價值，有興趣的可以了解一下
由于hover偽類添加的動畫效果，僅當鼠標放在元素上時會被觸發(fā)，而當鼠標離開時，效果會中斷，會顯得很生硬。
大多數(shù)人的想法都是使用js的onmouseover和onmouseleave事件來實現(xiàn)動畫效果。其實不必這么麻煩，CSS3便可以幫你解決這些問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>離開時效果生硬</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
}
div:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
由于div元素只有在:hover偽類觸發(fā)的時候，效果才能加到div元素上。
當鼠標離開div元素的時候，:hover偽類將不再生效，瞬間丟掉hover里寫的動畫效果。
此時，我們應(yīng)當在原本元素上再寫一個一模一樣的transition效果，將離開斷掉的動畫效果續(xù)接上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>簡單解決</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一個transition */
transition: all 1s linear;
}
div:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
此時，不管鼠標在什么時候離開元素，都會原樣返回。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這是一款使用CSS3制作鼠標hover圖片遮罩層動畫特效，在鼠標hover圖片時，會生成一個不同顏色的遮罩層，并顯示文字2017-06-27
這是一套鼠標hover按鈕動畫特效代碼。5種效果，在結(jié)構(gòu)布局上使用flex來進行布局，并通過css transition來實現(xiàn)動畫效果，歡迎下載2017-04-10- 本文主要介紹了CSS3制作hover下劃線動畫的方法步驟。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-27
16種基于css3 Bootstrap圖片hover懸停遮罩效果
bootstrap-image-hover是一款基于Bootstrap的css3圖片hover效果。共16種特效遮罩，歡迎下載2017-03-13
jQuery+CSS3實現(xiàn)的遮罩圖片hover翻轉(zhuǎn)效果源碼
是一款基于jQuery+css3實現(xiàn)的鼠標經(jīng)過遮罩圖片會出現(xiàn)翻轉(zhuǎn)特效的代碼，效果非常大方時尚，本段代碼適應(yīng)于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2015-05-21css3實現(xiàn)圖片遮罩效果鼠標hover以后出現(xiàn)文字
鼠標hover 以后，圖片上面出現(xiàn)一個遮罩透明度變化，顯示設(shè)置好的文字，完全使用css 實現(xiàn)，效果如下，喜歡的朋友可以參考下2013-11-05
CSS3實現(xiàn)的鼠標經(jīng)過按鈕后圖標翻轉(zhuǎn)特效源碼
CSS3創(chuàng)意按鈕鼠標經(jīng)過翻轉(zhuǎn)特效是一款分為4種顏色和3種尺寸大小，并且在鼠標滑過按鈕時帶有炫酷的翻轉(zhuǎn)效果，本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的朋友們可以前來下載使用2016-11-14
純CSS3 3D魔方翻轉(zhuǎn)動畫特效源碼是一款使用簡單純CSS3代碼實現(xiàn)的魔方特效下載，效果非常棒，本段代碼適應(yīng)于所有網(wǎng)頁使用，有需要的朋友可以直接下載使用2016-08-10
純css3實現(xiàn)的鼠標滑過圖片左右3d翻轉(zhuǎn)效果源碼
這是一款基于純css3實現(xiàn)的鼠標滑過圖片左右3d翻轉(zhuǎn)效果源碼。鼠標滑過圖片可見圖片呈現(xiàn)出翻轉(zhuǎn)的效果，該3d翻轉(zhuǎn)效果由純css3實現(xiàn)，不含任何js元素2016-07-25
純css3實現(xiàn)的3D方塊翻轉(zhuǎn)動畫特效源碼
這是一款純css3實現(xiàn)的3D方塊翻轉(zhuǎn)動畫特效源碼。畫面中心的立方體方塊自身做翻轉(zhuǎn)運動，方塊外圍的圓環(huán)也隨著方塊的轉(zhuǎn)動做旋轉(zhuǎn)運動，整體效果流暢自然。該特效動畫采用純css32016-07-22
