jquery倒影

基础概念

jQuery倒影（Reflection）通常指的是通过CSS和JavaScript实现的一种视觉效果，使得元素看起来像是其自身的镜像反射。这种效果可以通过多种方式实现，例如使用CSS的transform属性进行翻转，或者通过JavaScript动态创建元素的副本并调整其位置和样式。

类型

CSS倒影：使用CSS的transform属性进行水平或垂直翻转。
JavaScript倒影：通过JavaScript动态创建元素的副本，并调整其位置和样式。

应用场景

产品展示：在电子商务网站上展示产品时，可以使用倒影效果来突出产品的细节。
导航菜单：在导航菜单中使用倒影效果可以增加视觉层次感。
背景装饰：在页面背景中使用倒影效果可以增加设计的复杂性和深度。

示例代码

CSS倒影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Reflection</title>
    <style>
        .reflect {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 50px;
        }
        .reflect::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background: inherit;
            transform: scaleY(-1);
            opacity: 0.5;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="reflect"></div>
</body>
</html>

JavaScript倒影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Reflection</title>
    <style>
        .reflect {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            margin: 50px;
        }
        .reflect-copy {
            width: 100%;
            height: 100%;
            background-color: inherit;
            transform: scaleY(-1);
            opacity: 0.5;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="reflect" id="reflect"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $reflect = $('#reflect');
            var $reflectCopy = $('<div class="reflect-copy"></div>');
            $reflect.after($reflectCopy);
        });
    </script>
</body>
</html>