Css3如何实现鼠标移上变长特效？（图文+视频）
导读： 在前端页面设计中，css的功能是异常强大的，只要运用好它，你能实现很多网站各种精彩的动态效果。那么在之前的文章中也给大家分享介绍了一些用css实现动画效果的方法，比如【Css3动画如何实现旋转移动特效？】【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:width2s;
}
.hover:hover{
background:blue;
width:500px;
}
hover
其实这种效果是非常基础简单的。主要掌握:hover选择器和transition的使用。
:hover选择器是用于选择鼠标指针浮动在上面的元素。
过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
那么上述代码在前台实现的效果如下图所示：
9.gif
本篇文章就是关于css3实现鼠标移入变长效果的方法介绍，也是非常简单的，希望对有需要的朋友有所帮助！
想要了解更多前端相关知识，可以关注PHP中文网CSS3视频教程、CSS视频教程、Bootstrap教程等等相关教程，欢迎大家参考学习！
更多炫酷CSS3、html5、javascript特效代码，尽在：javascript特效大全
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Css3如何实现鼠标移上变长特效？（图文+视频）
本文地址： https://pptw.com/jishu/664856.html