CSS-卡片鼠标悬浮，动起来

最新推荐文章于 2024-08-15 19:28:56 发布

永不满足的求知者

最新推荐文章于 2024-08-15 19:28:56 发布

阅读量387

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_41154522/article/details/131000440

版权

这是一个使用HTML和CSS创建的商品列表展示页面，背景色为古董白。每个商品项以flex布局排列，具有平滑的过渡动画效果，当鼠标悬停时，商品框会下移并添加阴影，显示更详细信息。所有商品图片和名称都相同，用于示例。

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

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body{
        background-color: antiquewhite;
      }
      .goods-list {
        display: flex;
        justify-content: space-between;
        height: 426px;
      }
      ul {
        list-style: none;
        margin-top: 30px;
      }
      li {
        width: 306px;
        height: 406px;
        transition: all 0.5s;
        margin: 0;
        padding: 0;
        background-color: #fff;
      }
      li:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }
      img {
        width: 306px;
        height: 306px;
      }

      p {
        font-size: 22px;
        padding-top: 12px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <ul class="goods-list">
      <li>
        <img
          src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
          alt=""
        />
        <p class="name">特惠推荐</p>
      </li>
      <li>
        <img
          src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
          alt=""
        />
        <p class="name">特惠推荐</p>
      </li>
      <li>
        <img
          src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
          alt=""
        />
        <p class="name">特惠推荐</p>
      </li>
      <li>
        <img
          src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
          alt=""
        />
        <p class="name">特惠推荐</p>
      </li>
      <li>
        <img
          src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
          alt=""
        />
        <p class="name">特惠推荐</p>
      </li>
    </ul>
  </body>
</html>