HTML&CSS&JS：必看！主题“自动换装”，10+风格随机切换超惊艳

这段代码通过 HTML、CSS 和 JavaScript 实现了一个动态主题切换的引用块效果，适合用于展示引人深思的语录或名言，并支持多种主题风格。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!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>
        :root {
            --quote-font: "Georgia", serif;
            --quote-font-size: clamp(16px, 1vw, 14px);
            --quote-line-height: 1.5;
            --quote-padding: 4vw;
            --quote-border-width: 8px;
            --quote-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            --quote-letter-spacing: 1px;
        }



        .theme-switcher {
            margin-bottom: 20px;
        }

        .theme-switcher label {
            font-weight: bold;
            margin-right: 10px;
        }

        .theme-switcher select {
            padding: 5px 10px;
            font-size: 16px;
        }

        .inspiring-quote {
            font-family: var(--quote-font);
            font-size: var(--quote-font-size);
            line-height: var(--quote-line-height);
            max-width: 500px;
            margin: 40px auto;
            padding: var(--quote-padding);
            position: relative;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            animation: fadeIn 1.2s ease-in-out forwards;
            transition: all 0.5s ease-in-out;
        }

        .inspiring-quote p::before,
        .inspiring-quote p::after {
            font-size: clamp(16px, 1vw, 14px);
            font-weight: bold;
            position: absolute;
        }

        .inspiring-quote p::before {
            content: """;
            left: -10px;
            top: -30px;
        }

        .inspiring-quote p::after {
            content: """;
            right: -10px;
            bottom: -30px;
        }

        .inspiring-quote p {
            margin: 0;
            padding: 2vw;
            display: inline-block;
            position: relative;
            font-style: italic;
            font-weight: 400;
            max-width: 90%;
            text-align: center;
        }

        .inspiring-quote cite {
            display: block;
            font-size: clamp(16px, 1vw, 14px);
            font-weight: bold;
            margin-top: 1vw;
            text-transform: uppercase;
            letter-spacing: var(--quote-letter-spacing);
            font-style: normal;
        }

        .patriotic-theme {
            color: #43426B;
            background: #FAF8F1;
            border-left: var(--quote-border-width) solid #43426B;
            box-shadow: var(--quote-shadow);
        }

        .patriotic-theme p::before,
        .patriotic-theme p::after {
            color: #B3495D;
        }

        .classic-theme {
            color: #333;
            background: #f9f9f9;
            border-left: var(--quote-border-width) solid #2c3e50;
            box-shadow: var(--quote-shadow);
        }

        .dark-theme {
            color: #fff;
            background: #2c3e50;
            border-left: var(--quote-border-width) solid #f1c40f;
            box-shadow: var(--quote-shadow);
        }

        .gold-theme {
            color: #333;
            background: #fef7e5;
            border-left: var(--quote-border-width) solid #d4a017;
            box-shadow: var(--quote-shadow);
        }

        .ocean-theme {
            color: #014f86;
            background: #e3f2fd;
            border-left: var(--quote-border-width) solid #0288d1;
            box-shadow: var(--quote-shadow);
        }


        .minimalist-quotes-theme {
            color: #000;
            background: transparent;
            border-left: none;
            box-shadow: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            :root {
                --quote-padding: 6vw;
            }

            .inspiring-quote {
                padding: var(--quote-padding);
            }

            .inspiring-quote p {
                font-size: clamp(20px, 4vw, 30px);
            }

            .inspiring-quote p::before,
            .inspiring-quote p::after {
                font-size: clamp(50px, 6vw, 70px);
            }

            .inspiring-quote cite {
                font-size: clamp(16px, 1.8vw, 22px);
            }
        }

        body {
            font-family: sans-serif;
            text-align: center;
            background-color: #eee;
            padding: 20px;
            margin-top: 35px;
        }
    </style>
</head>

<body>
    <div class="theme-switcher">
        <label for="theme">Choose a Theme:</label>
        <select id="theme">
            <option value="patriotic-theme">Patriotic</option>
            <option value="classic-theme">Classic</option>
            <option value="dark-theme">Dark</option>
            <option value="gold-theme">Gold Elegance</option>
            <option value="ocean-theme">Ocean Breeze</option>
            <option value="minimalist-quotes-theme">Minimalist</option>
        </select>
    </div>

    <blockquote class="inspiring-quote patriotic-theme">
        <p>It's not about being the best. It's about being better than you were yesterday.</p>
        <cite>Hardy</cite>
    </blockquote>

    <script>
        document.getElementById("theme").addEventListener("change", function () {
            const quoteBlock = document.querySelector(".inspiring-quote");
            quoteBlock.className = "inspiring-quote " + this.value;
        });
    </script>
</body>

</html>

HTML 结构

theme-switcher：定义一个主题切换器，包含一个下拉菜单，用于选择不同的主题样式。
theme：下拉菜单，包含多个主题选项。
inspiring-quote patriotic-theme：定义一个引用块，显示一段引人深思的语录和作者。初始主题为"Patriotic"。

CSS 样式

:root：定义全局变量，包括字体、字号、行高、内边距、边框宽度、阴影和字母间距。
.theme-switcher：定义主题切换器的样式，包括外边距和字体样式。
.inspiring-quote：定义引用块的样式，包括字体、字号、行高、最大宽度、外边距、内边距、位置、对齐方式、动画和过渡效果。
.inspiring-quote p::before 和 .inspiring-quote p::after：定义引号的样式，包括字体大小、字体粗细和位置。
.inspiring-quote p：定义引用内容的样式，包括内边距、字体样式、最大宽度和对齐方式。
.inspiring-quote cite：定义引用来源的样式，包括字体大小、字体粗细、外边距和字母间

JavaScript 功能说明

监听下拉菜单的 change 事件。
根据选择的主题，动态更改引用块的类名，从而切换主题样式。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！