CSS之鼠标动画

最新推荐文章于 2024-02-27 09:26:47 发布

The_upside_of_down

最新推荐文章于 2024-02-27 09:26:47 发布

阅读量670

点赞数

文章标签： css动画 transition scale

本文链接：https://blog.csdn.net/The_upside_of_down/article/details/82754425

版权

本文介绍了如何使用CSS实现鼠标悬停图片时，图片放大、阴影和文字消失的动画效果。通过设置img的width、transition、scale属性，以及利用display: flex、overflow: hidden和opacity实现动画过渡。详细步骤包括HTML结构布局、CSS样式设置以及动画效果的最终实现。

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

先看下效果图：

首先，我们从效果图上可以看出来我们要做的动画特性，当鼠标放到图片上时，我们的图片会放大，并且图片下方的阴影和字都会消失。

图片是圆角的，字的背景颜色呈现半透明状态。

效果图给我们的直观感受大概就是这些，现在我们一步步来看看制作这个效果的过程。

第一步：我们选择四个图片，用无序列表来放置。并给图片上加上文字。

html代码：

   <li><img src="img/woman.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/man.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/mountain.jpg" alt=""><span>千年之恋</span></li>
   <li><img src="img/flower1.jpg" alt=""><span>千年之恋</span></li>

你会发现，图片的大小不一样，我们给图片设置同样的宽度