CSS3實現hover離開時平滑過渡的實例詳解
本篇文章主要介紹了CSS3實現偽類hover離開時平滑過渡效果示例，具有一定的參考價值，有興趣的可以了解一下
由於hover偽類添加的動畫效果，僅當滑鼠放在元素上時會被觸發，而當滑鼠離開時，效果會中斷，會顯得很生硬。
大多數人的想法都是使用js的onmouseover和onmouseleave事件來實現動畫效果。其實不必這麼麻煩，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">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
}
p:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>由於p元素只有在:hover偽類別觸發的時候，效果才能加到p元素上。
當滑鼠離開p元素的時候，:hover偽類別將不再生效，瞬間丟掉hover裡寫的動畫效果。
此時，我們應當在原本元素上再寫一個一模一樣的transition效果，將離開斷掉的動畫效果續接上。
<!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">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一个transition */
transition: all 1s linear;
}
p:hover{
transform: scale(2);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>此時，不管滑鼠在什麼時候離開元素，都會原樣回傳。
以上是CSS3實現hover離開時平滑過渡的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
CSS小技巧：利用transition保留hover狀態
Sep 27, 2022 pm 02:01 PM
如何保留 hover 的狀態？以下這篇文章跟大家介紹一下不借助javascript保留hover狀態的方法，希望對大家有幫助！
css怎麼隱藏元素但不佔空間
Jun 01, 2022 pm 07:15 PM
兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。
體驗即飛 攜手哈浮X1相機的飛行之旅
Jan 15, 2024 pm 02:21 PM
我們經常能夠在網路上看到很多精彩的俯視視角的視頻，無人機拍出來的畫面確實相當震撼，但其實很多人對無人機的認知很有限，例如有些地方限飛為什麼還能飛？其實即開即飛的「無人機」才是當前的主流，更值得多數人選擇，今天就帶給大家哈浮飛行相機X1的上手體驗。外觀方面，哈浮飛行相機X1，首創折疊設計，整機僅125g，比手機輕，折疊後可以輕鬆手握，放進包包毫無壓力。四個軟性染葉和安全邊框設計，完美保護拍攝安全。染葉創新採用Biobased生物基材，高彈耐用，安全環保;更有全保護邊框加持，起飛降落都能貼心保護手
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
原來利用純CSS也能實現文字輪播與圖片輪播！
Jun 10, 2022 pm 01:00 PM
怎麼製作文字輪播與圖片輪播？大家第一想到的是利用js，其實利用純CSS也能實現文字輪播與圖片輪播，下面來看看實作方法，希望對大家有幫助！
怎麼移除css的hover事件
Feb 01, 2023 am 10:06 AM
移除css hover事件的方法：1、；透過「$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })」方法綁定hover事件；2、透過「$('a').off('mouseenter').unbind('mouseleave');」方法取消綁定的hover事件即可。
