本篇文章主要給大家介紹用css3實現鼠標移入變長效果的方法。

在前端頁面設計中，css的功能是異常強大的，只要運用好它，你能實現很多網站各種精彩的動態效果。那么在之前的文章中也給大家分享介紹了一些用css實現動畫效果的方法，比如【Css3動畫如何實現旋轉移動特效？】【css3怎么實現鼠標懸停圖片時緩慢變大效果?】等等知識點介紹，需要的朋友可以選擇參考。

下面我們再結合簡單的代碼示例，為大家介紹css3實現鼠標移入div時，div變長的效果方法。

Css3實現鼠標移上變長特效

.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;

}

hover

其實這種效果是非常基礎簡單的。主要掌握 :hover 選擇器和transition的使用。

:hover 選擇器是用于選擇鼠標指針浮動在上面的元素。

過渡transition是一個復合屬性，包括transition-property、transition-duration、transition-timing-function、transition-delay這四個子屬性。通過這四個子屬性的配合來完成一個完整的過渡效果

那么上述代碼在前臺實現的效果如下圖所示：

本篇文章就是關于css3實現鼠標移入變長效果的方法介紹，也是非常簡單的，希望對有需要的朋友有所幫助！

想要了解更多前端相關知識，可以關注PHP中文網CSS3視頻教程、CSS視頻教程、Bootstrap教程等等相關教程，歡迎大家參考學習！

更多炫酷CSS3、html5、javascript特效代碼，盡在：javascript特效大全

總結

以上是生活随笔為你收集整理的css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）的全部內容，希望文章能夠幫你解決所遇到的問題。

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