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: width 2s;

}

.hover:hover{

background: blue;

width: 500px;

}

hover

其实这种效果是非常基础简单的。主要掌握 :hover 选择器和transition的使用。

:hover 选择器是用于选择鼠标指针浮动在上面的元素。

过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

那么上述代码在前台实现的效果如下图所示:

fa0bad39ce764e8f94e44597a0bcab79.gif

本篇文章就是关于css3实现鼠标移入变长效果的方法介绍,也是非常简单的,希望对有需要的朋友有所帮助!

想要了解更多前端相关知识,可以关注PHP中文网CSS3视频教程、CSS视频教程、Bootstrap教程等等相关教程,欢迎大家参考学习!

更多炫酷CSS3、html5、javascript特效代码,尽在:javascript特效大全

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值