Css3如何实现鼠标移上变长特效?

2024-01-18 10:24 小编
在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果。那么在之前的文章中也给大家分享介绍了一些用css实现动画效果的方法,比如【Css3动画如何实现旋转移动特效?】【css3怎么实现鼠标悬停图片时缓慢变大效果?】等等知识点介绍,需要的朋友可以选择参考。
 
  下面我们再结合简单的代码示例,为大家介绍css3实现鼠标移入div时,div变长的效果方法。
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <metacharset="utf-8">
 
  <title>Css3实现鼠标移上变长特效</title>
 
  <head>
 
  <style>
 
  .hover{
 
  width:200px;
 
  height:200px;
 
  border-radius:10px;
 
  background:red;
 
  margin-top:100px;
 
  margin-left:100px;
 
  transition:width2s;
 
  }
 
  .hover:hover{
 
  background:blue;
 
  width:500px;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="hover">
 
  hover
 
  </div>
 
  </body>
 
  </html>
 
  其实这种效果是非常基础简单的。主要掌握:hover选择器和transition的使用。
 
  :hover选择器是用于选择鼠标指针浮动在上面的元素。
 
  过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果
 
  那么上述代码在前台实现的效果如下图所示:
 
  9.gif
 
  本篇文章就是关于css3实现鼠标移入变长效果的方法介绍,也是非常简单的,希望对有需要的朋友有所帮助!
 
  想要了解更多前端相关知识,可以关注PHP中文网CSS3视频教程、CSS视频教程、Bootstrap教程等等相关教程,欢迎大家参考学习!


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码