CSS3-2D 转换进阶电商场景案例实战

最新推荐文章于 2025-07-29 20:25:09 发布

1加1等于

最新推荐文章于 2025-07-29 20:25:09 发布

阅读量454

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript实战文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45075226/article/details/149072576

javascript实战专栏收录该内容

39 篇文章

订阅专栏

本文是CSS3 2D转换的案例篇，不了解CSS3 2D转换的可以先看看之前的 CSS3-2D 转换（详细版）这篇文章进行入门，本篇以常见的电商系统需求为背景实现了两个小案例。

本文目录

- - - 一、鼠标悬停在商品卡片展示
    - 二、鼠标悬停在活动标题

一、鼠标悬停在商品卡片展示

需求：在商品展示区，当鼠标悬停在商品卡片上时，卡片先向上移动 10px，然后顺时针旋转 5 度，同时放大 1.05 倍，并且整个过程有过渡效果。

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

<head>
    <meta charset="UTF-8">
    <style>
       .product-card {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            transition: transform 0.3s;
        }

       .product-card:hover {
            transform: translate(0, -10px) rotate(5deg) scale(1.05);
        }
    </style>
</head>

<body>
    <div class="product-card">
        <img src="product.jpg" alt="商品图片">
        <h3>商品名称</h3>
        <p>商品描述</p>
    </div>
</body>

</html>

二、鼠标悬停在活动标题

需求：在促销活动区域，当鼠标悬停在活动标题上时，标题先水平倾斜 10 度，然后向右移动 20px，最后背景颜色从橙色过渡到红色，整个过程有过渡效果。

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

<head>
    <meta charset="UTF-8">
    <style>
       .promotion-title {
            background-color: #ff9900;
            display: inline-block;
            padding: 10px;
            transition: transform 0.3s, background-color 0.3s;
        }

       .promotion-title:hover {
            transform: skewX(10deg) translateX(20px);
            background-color: red;
        }
    </style>
</head>

<body>
    <h2 class="promotion-title">限时促销活动</h2>
</body>

</html>