本篇文章主要介紹用css3實作滑鼠移入變長效果的方法。
在前端頁面設計中，css的功能是異常強大的，只要運用好它，你能實現很多網站各種精彩的動態效果。那麼在先前的文章中也跟大家分享介紹了一些用css實現動畫效果的方法，例如【Css3動畫如何實現旋轉移動特效？ 】【css3怎麼實現滑鼠懸停圖片時緩慢變大效果?】等等知識點介紹，需要的朋友可以選擇參考。
下面我們再結合簡單的程式碼範例，為大家介紹css3實作滑鼠移入div時，div變長的效果方法。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
<style>
.hover{
width: 200px;
height: 200px;
border-radius: 10px;
background: red;
margin-top: 100px;
margin-left: 100px;
transition: width 2s;
}
.hover:hover{
background: blue;
width: 500px;
}
</style>
</head>
<body>
<div class="hover">
hover
</div>
</body>
</html>其實這種效果是非常基本簡單的。主要掌握 :hover 選擇器和transition的使用。
:hover 選擇器是用來選擇滑鼠指標浮動在上面的元素。
過渡transition是一個複合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。透過這四個子屬性的配合來完成一個完整的過渡效果
那麼上述程式碼在前台實現的效果如下圖所示：
css3實作滑鼠移入變長效果的方法介紹，也是非常簡單的，希望對有需要的朋友有幫助！
想要了解更多前端相關知識，可以關注PHP中文網CSS3影片教學、CSS影片教學、Bootstrap教學等等相關教程，歡迎大家參考學習！
以上是Css3如何實現滑鼠移上變長特效？ （圖文+影片）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
SublimeText3 Linux新版
SublimeText3 Linux最新版
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
WebStorm Mac版
好用的JavaScript開發工具
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
