HTML&CSS：让产品卡片 “动” 感十足

前端Hardy
256 阅读3分钟

这段代码创建了一个具有动态效果的产品卡片，通过 CSS 技术实现了卡片的缩放、移动和动画效果，为页面添加了视觉吸引力和用户交互体验。

演示效果

HTML&CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #212121;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .card {
            position: relative;
            background: #fff;
            width: 190px;
            height: 265px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 120ms;
            overflow: hidden;
            box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.1);
        }

        .card:active {
            transform: scale(.95);
        }

        .card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, .5);
            z-index: 1;
        }

        .card::after {
            content: "加入购物车";
            position: absolute;
            bottom: -50%;
            left: 0;
            padding-left: 15px;
            background: rgba(0, 0, 0, 0.6);
            width: 100%;
            height: 60px;
            color: #fff;
            line-height: 50px;
            text-transform: uppercase;
            z-index: 2;
            transition: all .2s ease-in;
        }

        .card:hover::after {
            bottom: 0;
        }

        .card:active::after {
            content: "Adding !";
            height: 65px;
        }

        .image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: auto;
            filter: drop-shadow(3px 3px 5px #18181815);
            transform: translate(-50%, -50%);
            animation: shoes 1s ease infinite alternate;
            transition: all .5s ease-in;
        }

        @keyframes shoes {
            from {
                top: 48%;
            }

            to {
                top: 52%;
            }
        }

        .card:hover .image {
            width: 220px;
            height: auto;
            animation: none;
            transform: rotate(15deg) translate(-35%, -25%);
        }

        .text {
            position: absolute;
            top: 15%;
            left: -80%;
            color: #181818;
            transition: all .3s ease-in;
        }

        .text span {
            font-size: 25px;
            font-weight: 400;
            margin-bottom: 5px;
        }

        .text p {
            font-size: 18px;
            font-weight: bold;
        }

        .card:hover .text {
            top: 15%;
            left: 5%;
        }

        .fil-shoes2 {
            fill: #a59573
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="image">
            <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 116.83 182.61"
                style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" class="img-product">
                <defs></defs>
                <g id="Layer_x0020_1">
                    <metadata id="CorelCorpID_0Corel-Layer"></metadata>
                    <path
                        d="M99.33 20.55c-4.24,-1.91 -3.3,-0.4 -8.3,-3.82 -4.06,-2.78 -12.82,-7.22 -17.68,-9.3 -0.94,-0.4 -2.53,-1.19 -4.13,-1.73l-6.69 -1.8c-0.99,-0.23 -1.3,-0.65 -2.22,-0.84 -2.53,-0.53 -3.82,-0.46 -6.69,-1.8 -1.49,-0.7 -2.01,-1.69 -3.83,-1.04 -0.87,0.31 -1.19,0.64 -1.58,1.41 -2.44,4.98 -7.2,7.7 -11.26,11.02l-2.61 1.83c-3.93,2.6 -9.38,4.53 -13.7,6.73 -2.89,1.47 -0.86,0.97 -4.02,0.7 -3.13,-0.27 -6.21,3.31 -8.33,5.29 -1.04,0.97 -0.92,0.53 -1.85,1.4 -0.47,0.44 -1.08,1.33 -1.33,1.49 -1.07,0.68 -4.09,2.28 -4.75,3.1 -1.3,1.63 1.31,5.1 2.23,7.24 0.64,1.49 1.76,3.02 3.13,4.07 0.74,0.56 1.15,1.74 1.7,2.61 -4.07,2.78 -3.12,3.46 -2.09,4.55 2.17,2.3 3.66,4.97 5.89,7.28 4.1,4.26 1.12,4.68 2.64,8.38 0.55,1.33 0.85,1.09 0.9,2.64 0.11,3.4 -2.12,4.67 -1.04,9.36 1.66,7.23 0.4,2.11 0.06,5.96 -0.07,0.84 0.09,2.01 0.28,2.8 0.37,1.51 0.52,1.49 1.31,2.75 -3.14,5.43 0.18,6.41 -0.44,8.98 -0.6,2.51 -0.95,3.64 -0.11,6.01 0.32,0.9 1.2,2.1 1.3,2.75 0.18,1.1 -0.42,1.33 -0.22,2.94 0.25,2.12 -0.18,4.23 0.11,5.95 0.29,1.75 0.42,0.99 0.2,3.05 -0.34,3.15 -1.45,5.88 -0.63,9.03 0.31,1.2 -2.36,8.82 -2.7,10.03 -1.79,6.36 -5.05,13.1 -6.2,19.61 -0.61,3.43 -2.34,1.66 -1.11,6.28 0.92,3.47 4.04,4.61 5.91,7.28 0.79,1.12 0.41,1.28 1.7,2.65l2.35 2.25c1.77,1.48 2.49,2.9 5.16,4.13l2.42 0.76c2.87,0.45 5.92,-1.16 8.06,-2.98l5.48 -5.18c2.01,-2 3.71,-4.85 5.66,-6.98 2.12,-2.32 9.8,-15.54 11.11,-18.32 0.6,-1.26 1.15,-1.61 1.93,-2.45 1.29,-1.38 0.99,-2.19 1.76,-3.35 0.69,-1.05 1.38,-1.26 2.33,-2.87 2.62,-4.45 24.66,-42 26.3,-45.85 0.9,-2.11 3.13,-4.62 4.12,-6.85 2.49,-5.61 5.17,-12.08 8.85,-17.34 2.18,-3.12 8.43,-13.52 8.19,-15.8 0.86,-0.42 7.8,-14 8.75,-15.88 2.13,-4.22 1.53,-9.85 -2.88,-12.09 -4.39,-2.47 -8.77,-3.95 -13.43,-6.05z"
                        class="fil-shoes2"></path>
                </g>
            </svg>
        </div>
        <div class="text">
            <span>Nike</span>
            <p>$200</p>
        </div>
    </div>
</body>

</html>

HTML 结构

  • card: 创建一个类名为“card”的 div 元素，用于包含整个产品卡片。
  • image: 包含产品图片的 div。
  • svg: 创建一个 SVG 图片。
  • text: 包含产品名称和价格的 div。
  • span: 显示产品名称。
  • p: 显示产品价格。

CSS 样式

  • body: 设置页面的边距、填充、背景色、显示方式和高度。
  • .card: 设置卡片的样式，包括位置、背景、尺寸、边框半径、鼠标指针样式、过渡效果和溢出隐藏。
  • .card:active: 设置卡片在点击时的缩放效果。
  • .card::before: 设置卡片的前伪元素，用于创建内部阴影效果。
  • .card::after: 设置卡片的后伪元素，用于创建底部按钮，并在鼠标悬停时显示。
  • .card:hover::after: 设置鼠标悬停在卡片上时底部按钮的样式，使其显示。
  • .card:active::after: 设置卡片在点击时底部按钮的样式，改变内容和高度。
  • .image: 设置图片的样式，包括位置、尺寸、滤镜效果和动画效果。
  • @keyframes shoes: 定义图片的上下浮动动画。
  • .card:hover .image: 设置鼠标悬停在卡片上时图片的样式，使其放大并旋转。
  • .text: 设置文本的样式，包括位置、颜色和过渡效果。
  • .text span: 设置产品名称的样式，包括字体大小和权重。
  • .text p: 设置产品价格的样式，包括字体大小和权重。
  • .card:hover .text: 设置鼠标悬停在卡片上时文本的样式，使其移动。
  • .fil-shoes2: 设置 SVG 图片的填充颜色。
avatar
文章
阅读
粉丝