鼠标滑过一个元素可以添加那些特效呢？

最新推荐文章于 2022-05-18 14:41:53 发布

肖肖肖丽珠

最新推荐文章于 2022-05-18 14:41:53 发布

阅读量395

点赞数

分类专栏：前端小知识 css

本文链接：https://blog.csdn.net/qq_33769914/article/details/78538651

版权

本文介绍了鼠标悬停元素时可以实现的各种CSS特效，包括图片旋转、放大、添加对勾选中样式、位置移动以及阴影效果。通过CSS的transform属性和hover伪类，可以为网页元素增添丰富的交互体验。

摘要由CSDN通过智能技术生成

我能想到的基本的有：换颜色，改字体大小，加一些下划线，边框的样式啊····

其实我们还可以，是他有动画的效果，比如：图片旋转360度啊、放大缩小啊、等一些transform的动画效果

<ul>
<li>
<img src="/shop/Home/View/Public/images/supplier/apt_img1.png" class="apt_img">
如果你是国内外著名品牌的生产制造商
</li>
<li>
<img src="/shop/Home/View/Public/images/supplier/apt_img2.png" class="apt_img">
有ISO管理体系、CE等国际认证
</li>
<li class="mr0">
<img src="/shop/Home/View/Public/images/supplier/apt_img3.png" class="apt_img">
能提供优质专业的OEM、ODM等服务
</li>
</ul>

css样式：

 
  ul li {
    
    position: relative; 
  
    float: left; 
  
    margin-right: 30px; 
  
    text-align: center; 
  
    width: 320px; 
  
    height: 300px; 
  
  overflow: hidden;  //这个是重点即使里面的图片放大，外面的框的