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


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>Documenttitle>
    <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>

你可能感兴趣的:(css,css3,前端)