禁毒路上，任重道远 | HTML页面

文章目录

一：效果展示
二：《中华人民共和国刑法》相关条款
三：完整代码
四：特效含义解析
- - [1. 整体视觉风格特效](#1. 整体视觉风格特效)
  - [2. 内容区块特效](#2. 内容区块特效)
  - - （1）区块悬浮效果
    - （2）顶部流动渐变
  - [3. 毒品图鉴特效](#3. 毒品图鉴特效)
  - - （1）图片悬停放大
    - （2）标签滑动出现
  - [4. 缉毒警区块特效](#4. 缉毒警区块特效)
  - - （1）深色背景与动态网格
    - （2）故事光带流动
  - [5. 誓言区块特效](#5. 誓言区块特效)
  - - （1）血液文字效果
  - [6. 警告系统特效](#6. 警告系统特效)
  - - （1）脉冲警告图标
    - （2）模态框闪烁标题
  - [7. Canvas特效](#7. Canvas特效)

一：效果展示

浏览网址：https://mildfx.com

二：《中华人民共和国刑法》相关条款

（1）走私、贩卖、运输、制造毒品罪

（第三百四十七条）：

走私、贩卖、运输、制造毒品，无论数量多少，都应当追究刑事责任
数量大的，处十五年有期徒刑、无期徒刑或者死刑

（2）非法持有毒品罪

（第三百四十八条）：

非法持有鸦片一千克以上、海洛因或者甲基苯丙胺五十克以上或者其他毒品数量大的，处七年以上有期徒刑或者无期徒刑

（3）容留他人吸毒罪

（第三百五十四条）：

容留他人吸食、注射毒品的，处三年以下有期徒刑、拘役或者管制，并处罚金

三：完整代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>禁毒路上，任重道远</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #c00;
            --secondary-color: #333;
            --accent-color: #e63946;
            --light-color: #f5f5f5;
            --dark-color: #1d3557;
            --police-blue: #2c3e50;
            --gold-color: #f1c40f;
		    --blood-color: #ff3333;
		   	--blood-dark: #cc0000;
        }

        body {
            font-family: 'Microsoft YaHei', 'SimHei', sans-serif;
            line-height: 1.8;
            color: #333;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: #000;
            overflow-x: hidden;
            position: relative;
        }

        header {
            text-align: center;
            padding: 40px 20px;
            background: linear-gradient(135deg, #800, #c00, #800);
            color: white;
            margin-bottom: 30px;
            border-radius: 0;
            box-shadow: 0 5px 25px rgba(255, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
            animation: headerGlow 4s ease-in-out infinite alternate;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            width: 100%;
            box-sizing: border-box;
        }

        header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,0,0,0.3) 0%, rgba(0,0,0,0) 70%);
            animation: pulseRing 3s ease-out infinite;
        }

        @keyframes headerGlow {
            from {
                background: linear-gradient(135deg, #600, #a00, #600);
                text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            }
            to {
                background: linear-gradient(135deg, #c00, #f00, #c00);
                text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
            }
        }

        @keyframes pulseRing {
            0% {
                transform: scale(0.5);
                opacity: 0;
            }
            50% {
                opacity: 0.3;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }

        h1 {
            margin: 0;
            font-size: 2.2em;
            position: relative;
            display: inline-block;
            letter-spacing: 2px;
            animation: titleFlicker 5s infinite;
        }

        @keyframes titleFlicker {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.95; }
            51% { opacity: 1; }
            52% { opacity: 0.97; }
            53% { opacity: 1; }
        }

        h1 i {
            animation: iconGlow 2s infinite;
        }

        @keyframes iconGlow {
            0%, 100% { transform: scale(1); text-shadow: 0 0 10px #fff; }
            50% { transform: scale(1.05); text-shadow: 0 0 20px #ff0, 0 0 30px #f00; }
        }

        h1::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 4px;
            background: linear-gradient(90deg, transparent, #fff, transparent);
            animation: underlineGlow 2s infinite;
        }

        @keyframes underlineGlow {
            0%, 100% { width: 60%; opacity: 0.7; }
            50% { width: 100%; opacity: 1; }
        }

        .subtitle {
            margin-top: 25px;
            font-size: 1.2em;
            opacity: 0.9;
            letter-spacing: 1px;
            font-weight: 300;
        }

        .main-container {
            max-width: 100%;
            margin: 0;
            padding: 0 15px;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 30px;
            perspective: 1000px;
        }

        .section {
            background-color: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.3);
            width: 100%;
            transition: all 0.3s ease;
            transform-style: preserve-3d;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(204, 0, 0, 0.3);
            box-sizing: border-box;
        }

        .section:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(204, 0, 0, 0.4);
            border-color: rgba(204, 0, 0, 0.8);
        }

        .section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #c00, #e63946, #c00);
            background-size: 200% auto;
            animation: gradientFlow 3s linear infinite;
        }

        @keyframes gradientFlow {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        .section h2 {
            color: #c00;
            border-bottom: 2px solid #c00;
            padding-bottom: 10px;
            margin-top: 0;
            position: relative;
            font-size: 1.5em;
        }

        .section h2 i {
            margin-right: 10px;
            color: #e63946;
        }

        .drug-images {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            justify-content: center;
            margin: 20px 0;
        }

        .drug-image-container {
            position: relative;
            width: 100%;
            height: 150px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            transition: all 0.3s ease;
            border: 2px solid #c00;
        }

        .drug-image-container:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 25px rgba(255,0,0,0.5);
            border-color: #f00;
            animation: shake 0.5s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0) scale(1.05); }
            20% { transform: translateX(-3px) scale(1.05); }
            40% { transform: translateX(3px) scale(1.05); }
            60% { transform: translateX(-3px) scale(1.05); }
            80% { transform: translateX(3px) scale(1.05); }
        }

        .drug-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
            filter: grayscale(30%);
        }

        .drug-image-container:hover .drug-image {
            transform: scale(1.2);
            filter: grayscale(0%) brightness(0.6);
        }

        .drug-label {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.9));
            color: #fff;
            padding: 10px 5px 5px;
            text-align: center;
            transform: translateY(100%);
            transition: all 0.3s ease;
            font-weight: bold;
            text-shadow: 0 0 5px #000;
            font-size: 0.9em;
        }

        .drug-image-container:hover .drug-label {
            transform: translateY(0);
        }

        .police-section {
            background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
            color: white;
            position: relative;
            overflow: hidden;
            border: none;
        }

        .police-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                linear-gradient(45deg, rgba(255,0,0,0.05) 25%, transparent 25%, transparent 50%, rgba(255,0,0,0.05) 50%, rgba(255,0,0,0.05) 75%, transparent 75%, transparent),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="rgba(255,255,255,0.03)" d="M0 0h100v100H0z"/><path fill="rgba(255,255,255,0.02)" d="M50 0v20M0 50h20M100 50h-20M50 100v-20M20 20l10 10M70 20l-10 10M70 70l-10-10M20 70l10-10"/></svg>');
            pointer-events: none;
            background-size: 20px 20px, 100px 100px;
            animation: policeBgMove 60s linear infinite;
        }

        @keyframes policeBgMove {
            from { background-position: 0 0, 0 0; }
            to { background-position: 1000px 1000px, 100px 100px; }
        }

        .police-section h2 {
            color: #fff;
            border-bottom-color: var(--gold-color);
        }

        .police-section h2 i {
            color: var(--gold-color);
            text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
        }

        .quote {
            font-style: italic;
            font-size: 1.2em;
            margin: 30px 0;
            padding: 20px;
            background: rgba(0,0,0,0.3);
            border-left: 4px solid var(--gold-color);
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .quote::before {
            content: '"';
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 3em;
            color: rgba(255,255,255,0.1);
            line-height: 1;
            font-family: Georgia, serif;
        }

        .quote::after {
            content: '"';
            position: absolute;
            bottom: -20px;
            right: 15px;
            font-size: 3em;
            color: rgba(255,255,255,0.1);
            line-height: 1;
            font-family: Georgia, serif;
        }

        .police-grid {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin: 20px 0;
        }

        .police-story {
            background: rgba(255,255,255,0.05);
            padding: 15px;
            border-radius: 8px;
            border-left: 3px solid var(--gold-color);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .police-story:hover {
            background: rgba(255,255,255,0.1);
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .police-story::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.05), transparent);
            animation: storyGlow 3s infinite;
        }

        @keyframes storyGlow {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .police-story h3 {
            color: var(--gold-color);
            margin-top: 0;
            font-size: 1.1em;
        }

        .police-story h3 i {
            margin-right: 8px;
        }

        .oath {
            text-align: center;
            font-weight: bold;
            font-size: 1.2em;
            margin: 30px 0;
            padding: 20px;
            background: rgba(0,0,0,0.4);
            border-radius: 8px;
            position: relative;
            border: 1px solid rgba(255,0,0,0.3);
            line-height: 1.8;
            text-shadow: 0 0 5px rgba(255,0,0,0.8), 0 0 10px rgba(255,0,0,0.5);
            color: #ffeeee;
            overflow: hidden;
        }

        .oath::before, .oath::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border: 2px solid rgba(255,0,0,0.3);
            opacity: 0.3;
            border-radius: 50%;
        }

        .oath::before {
            top: -15px;
            left: -15px;
            border-right: none;
            border-bottom: none;
        }

        .oath::after {
            bottom: -15px;
            right: -15px;
            border-left: none;
            border-top: none;
        }

        .oath-text {
            position: relative;
            display: inline-block;
            color: var(--blood-color);
            animation: bloodText 3s ease-in-out infinite alternate;
        }

        @keyframes bloodText {
            0% {
                text-shadow:
                    0 0 5px rgba(255,0,0,0.8),
                    0 0 10px rgba(255,0,0,0.6),
                    0 0 15px rgba(255,0,0,0.4);
                filter: url(#blood);
            }
            100% {
                text-shadow:
                    0 0 10px rgba(255,0,0,1),
                    0 0 20px rgba(255,0,0,0.8),
                    0 0 30px rgba(255,0,0,0.6),
                    0 0 40px rgba(255,0,0,0.4);
                filter: url(#blood);
            }
        }

        ol.prevention-list {
            counter-reset: item;
            padding-left: 20px;
        }

        ol.prevention-list li {
            counter-increment: item;
            margin-bottom: 15px;
            padding-left: 15px;
            position: relative;
            transition: all 0.3s ease;
            font-size: 1em;
        }

        ol.prevention-list li:hover {
            transform: translateX(8px);
            color: #c00;
            text-shadow: 0 0 5px rgba(204, 0, 0, 0.3);
        }

        ol.prevention-list li::before {
            content: counter(item);
            position: absolute;
            left: -20px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: #c00;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            font-weight: bold;
            font-size: 0.8em;
            box-shadow: 0 0 8px rgba(204, 0, 0, 0.5);
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 30px 15px;
            border-top: 1px solid #333;
            font-size: 0.9em;
            color: #999;
            background: #111;
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }

        footer::before {
            content: '';
            position: absolute;
            top: -3px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #c00, #f00, #c00);
            background-size: 200% auto;
            animation: footerGradient 3s linear infinite;
            box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
        }

        @keyframes footerGradient {
            0% { background-position: 0% center; }
            100% { background-position: 200% center; }
        }

        .warning-sign {
            position: fixed;
            bottom: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: #c00;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
            animation: warningPulse 2s infinite;
            z-index: 1000;
            cursor: pointer;
            bottom: max(15px, env(safe-area-inset-bottom));
            right: max(15px, env(safe-area-inset-right));
        }

        @keyframes warningPulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
            70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
        }

        .warning-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            color: white;
            text-align: center;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: modalFadeIn 0.5s;
            padding: 20px;
            box-sizing: border-box;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .warning-modal.active {
            display: flex;
        }

        .warning-modal h2 {
            font-size: 2em;
            margin-bottom: 20px;
            color: #f00;
            text-shadow: 0 0 15px #f00;
            animation: titleFlicker 3s infinite;
        }

        .warning-modal p {
            font-size: 1.1em;
            max-width: 800px;
            margin: 10px auto;
            line-height: 1.6;
        }

        .close-modal {
            margin-top: 30px;
            padding: 12px 30px;
            background: #c00;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s;
        }

        .close-modal:hover {
            background: #f00;
            transform: scale(1.05);
        }

        .scroll-animation {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .scroll-animation.visible {
            opacity: 1;
            transform: translateY(0);
        }

        @media (min-width: 768px) {
            .container {
                flex-direction: row;
                gap: 30px;
            }

            .section {
                flex: 1;
                min-width: 300px;
                padding: 30px;
            }

            h1 {
                font-size: 3.2em;
            }

            .subtitle {
                font-size: 1.4em;
            }

            .police-grid {
                flex-direction: row;
            }

            .drug-images {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .drug-image-container {
                height: 180px;
            }

            .drug-label {
                font-size: 1em;
                padding: 15px 10px 10px;
            }

            .oath {
                font-size: 1.3em;
                padding: 30px;
            }

            .oath::before, .oath::after {
                width: 80px;
                height: 80px;
            }

            footer {
                font-size: 1em;
                padding: 40px 20px;
            }


            footer::before {
                height: 5px;
                top: -5px;
            }

            .warning-sign {
                width: 50px;
                height: 50px;
                font-size: 24px;
                bottom: 20px;
                right: 20px;
            }

            .warning-modal h2 {
                font-size: 3em;
            }

            .warning-modal p {
                font-size: 1.5em;
                margin: 15px auto;
            }

            .close-modal {
                margin-top: 40px;
                padding: 15px 40px;
                font-size: 1.2em;
            }
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                linear-gradient(90deg, rgba(255,0,0,0.02) 1px, transparent 1px),
                linear-gradient(rgba(255,0,0,0.02) 1px, transparent 1px);
            background-size: 50px 50px;
            pointer-events: none;
            z-index: -1;
            animation: bgMove 120s linear infinite;
        }

        @keyframes bgMove {
            from { background-position: 0 0; }
            to { background-position: 1000px 1000px; }
        }
    </style>
</head>
<body>
    <div class="warning-sign" id="warningSign">
        <i class="fas fa-exclamation-triangle"></i>
    </div>

    <div class="warning-modal" id="warningModal">
        <h2><i class="fas fa-skull-crossbones"></i> 警 告 <i class="fas fa-skull-crossbones"></i></h2>
        <p>毒品严重危害身心健康，破坏家庭幸福，危害社会安全。</p>
        <p>本页面内容旨在普及毒品危害知识，增强防毒意识。</p>
        <p>请自觉远离毒品，如发现涉毒行为请立即向公安机关举报！</p>
        <button class="close-modal" id="closeModal">我承诺远离毒品</button>
    </div>

    <header>
        <h1><i class="fas fa-shield-alt"></i> 禁毒路上，任重道远</h1>
        <p class="subtitle">共建无毒社会，共享健康人生</p>
    </header>

    <div class="main-container">
        <div class="container">
            <div class="section scroll-animation">
                <h2><i class="fas fa-skull-crossbones"></i> 毒品危害</h2>
                <p>毒品是指鸦片、海洛因、甲基苯丙胺（冰毒）、吗啡、大麻、可卡因以及国家规定管制的其他能够使人形成瘾癖的麻醉药品和精神药品</p>
                <p>吸毒不仅严重危害身心健康，还会导致家庭破裂、社会危害，甚至引发各种违法犯罪活动。毒品问题还会侵蚀社会风气，影响社会稳定</p>
                <p><strong>常见毒品类型：</strong>海洛因、冰毒、摇头丸、K粉、大麻、可卡因等</p>
                <div class="drug-facts">
                    <h3><i class="fas fa-exclamation-triangle"></i> 吸毒者的悲惨结局</h3>
                    <ul>
                        <li><i class="fas fa-angle-right"></i> 身体健康每况愈下</li>
                        <li><i class="fas fa-angle-right"></i> 精神障碍，对生活失去兴趣</li>
                        <li><i class="fas fa-angle-right"></i> 巨额毒资消耗，家庭经济崩溃</li>
                        <li><i class="fas fa-angle-right"></i> 家庭关系破裂，社会交往障碍</li>
                        <li><i class="fas fa-angle-right"></i> 走上犯罪道路，面临法律制裁</li>
                        <li><i class="fas fa-angle-right"></i> 最终失去一切</li>
                    </ul>
                </div>
            </div>

            <div class="section scroll-animation" style="transition-delay: 0.2s;">
                <h2><i class="fas fa-images"></i> 毒品图鉴</h2>
                <p>以下是几种常见毒品的真实形态，请务必认清它们的危险面目：</p>
                <div class="drug-images">
                    <div class="drug-image-container">
                        <img src="海洛因.png" alt="海洛因" class="drug-image">
                        <div class="drug-label">海洛因</div>
                    </div>
                    <div class="drug-image-container">
                        <img src="冰毒.jpg" alt="冰毒" class="drug-image">
                        <div class="drug-label">冰毒</div>
                    </div>
                    <div class="drug-image-container">
                        <img src="摇头丸.jpg" alt="摇头丸" class="drug-image">
                        <div class="drug-label">摇头丸</div>
                    </div>
                    <div class="drug-image-container">
                        <img src="K粉.jpg" alt="K粉" class="drug-image">
                        <div class="drug-label">K粉</div>
                    </div>
                </div>
                <p><small><i class="fas fa-info-circle"></i> 注：以上图片为示意，实际毒品外观可能有所不同。请勿尝试接触或使用任何毒品。</small></p>
            </div>
        </div>

        <div class="section police-section scroll-animation" style="transition-delay: 0.4s;">
            <h2><i class="fas fa-badge-sheriff"></i> 缉毒警的誓言</h2>
            <p>在我们看不见的地方，有一群人正在与毒品犯罪进行着无声的较量。他们就是英勇的缉毒警察，用生命守护着社会的安宁。</p>

            <div class="police-grid">
                <div class="police-story">
                    <h3><i class="fas fa-medal"></i> 边境线上的英雄</h3>
                    <p>2021年，云南某边境缉毒行动中，25岁的缉毒警小张在追捕毒贩时，不幸被毒贩开枪击中。在生命的最后时刻，他仍然紧紧抱住毒贩的腿，为战友争取了宝贵的抓捕时间。</p>
                </div>
                <div class="police-story">
                    <h3><i class="fas fa-fist-raised"></i> 与死神擦肩</h3>
                    <p>2022年，广东警方破获特大贩毒案，主犯持有枪支。在抓捕过程中，多名缉毒警受伤，但他们没有退缩，最终成功缴获毒品200余公斤。</p>
                </div>
            </div>

            <div class="quote">
                "我们多查一克毒品，民众就少受一分害。即使牺牲，也要守护这片净土。"
                <br>------一名匿名缉毒警察的日记
            </div>

            <h3><i class="fas fa-scroll"></i> 缉毒警的誓言</h3>
            <p>面对毒贩的威胁，他们从未退缩；面对生死的考验，他们勇往直前。每一名缉毒警察都铭记着这样的誓言：</p>
            <div class="oath">
                <div class="oath-text">
                    "我将以生命为誓，以热血为证，<br>
                    不畏艰险，不惧牺牲，<br>
                    坚决打击毒品犯罪，<br>
                    守护人民安康，<br>
                    捍卫法律尊严！"
                </div>
            </div>

            <div class="police-stats">
                <h3><i class="fas fa-chart-line"></i> 2024年我国缉毒成绩</h3>
                <div style="display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;">
                    <div style="text-align: center; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; min-width: 100px;">
                        <div style="font-size: 1.5em; color: var(--gold-color);">3.7万+</div>
                        <div>年均破案数</div>
                    </div>
                    <div style="text-align: center; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; min-width: 100px;">
                        <div style="font-size: 1.5em; color: var(--gold-color);">26.7吨+</div>
                        <div>年均缴毒量</div>
                    </div>
                    <div style="text-align: center; background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; min-width: 100px;">
                        <div style="font-size: 1.5em; color: var(--gold-color);">6.2万+</div>
                        <div>年均抓捕人数</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="section scroll-animation" style="transition-delay: 0.6s;">
            <h2><i class="fas fa-shield-virus"></i> 如何远离毒品</h2>
            <ol class="prevention-list">
                <li><strong>增强法律意识</strong> - 了解毒品危害和相关法律法规</li>
                <li><strong>谨慎交友</strong> - 不轻信他人，远离有吸毒前科的人员</li>
                <li><strong>远离不良场所</strong> - 避免进入KTV、酒吧等复杂娱乐场所</li>
                <li><strong>培养健康爱好</strong> - 用运动、阅读等积极活动充实生活</li>
                <li><strong>及时寻求帮助</strong> - 发现身边有人吸毒立即报警</li>
            </ol>
        </div>
    </div>

    <footer>
        <p><strong style="color: red;">吸毒者不该被原谅！！！他们要为自己的行为付出代价</strong></p>
<p><strong style="color: red;">若给吸毒的人一次机会，那谁来给牺牲的缉毒警察一次复活的机会</strong></p>
        <p style="margin-top: 10px;"><small>本网站内容为创作者个人观点，仅供参考</small></p>
    </footer>

    <script>
document.addEventListener('DOMContentLoaded', function() {
    const scrollElements = document.querySelectorAll('.scroll-animation');

    const elementInView = (el, dividend = 1) => {
        const elementTop = el.getBoundingClientRect().top;
        return (
            elementTop <=
            (window.innerHeight || document.documentElement.clientHeight) / dividend
        );
    };

    const displayScrollElement = (element) => {
        element.classList.add('visible');
    };

    const handleScrollAnimation = () => {
        scrollElements.forEach((el, index) => {
            if (elementInView(el, 1.25)) {
                setTimeout(() => {
                    displayScrollElement(el);
                }, index * 100);
            }
        });
    };

    window.addEventListener('scroll', handleScrollAnimation);
    handleScrollAnimation();

    const warningSign = document.getElementById('warningSign');
    const warningModal = document.getElementById('warningModal');
    const closeModal = document.getElementById('closeModal');

    if (!localStorage.getItem('warningAcknowledged')) {
        setTimeout(() => {
            warningModal.classList.add('active');
        }, 1000);
    }

    warningSign.addEventListener('click', () => {
        warningModal.classList.add('active');
    });

    closeModal.addEventListener('click', () => {
        warningModal.classList.remove('active');
        localStorage.setItem('warningAcknowledged', 'true');
    });

    document.querySelectorAll('.section').forEach(section => {
        section.addEventListener('mouseenter', function() {
            this.style.boxShadow = '0 15px 30px rgba(204, 0, 0, 0.5)';
        });
        section.addEventListener('mouseleave', function() {
            this.style.boxShadow = '0 5px 25px rgba(0,0,0,0.3)';
        });
    });

    document.querySelectorAll('.drug-image-container').forEach(container => {
        container.addEventListener('mouseenter', function() {
            const label = this.querySelector('.drug-label');
            label.style.transform = 'translateY(0)';
        });
        container.addEventListener('mouseleave', function() {
            const label = this.querySelector('.drug-label');
            label.style.transform = 'translateY(100%)';
        });
    });

    const canvas = document.createElement('canvas');
    canvas.style.position = 'fixed';
    canvas.style.top = '0';
    canvas.style.left = '0';
    canvas.style.width = '100%';
    canvas.style.height = '100%';
    canvas.style.pointerEvents = 'none';
    canvas.style.zIndex = '100';
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function drawLightning(x1, y1, x2, y2) {
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(x1, y1);

        let dx = x2 - x1;
        let dy = y2 - y1;
        let dist = Math.sqrt(dx * dx + dy * dy);
        let angle = Math.atan2(dy, dx);
        let segments = Math.floor(dist / 10);

        let currentX = x1;
        let currentY = y1;

        for (let i = 0; i < segments; i++) {
            let offsetX = (Math.random() * 20 - 10) * (segments - i) / segments;
            let offsetY = (Math.random() * 20 - 10) * (segments - i) / segments;

            let nextX = x1 + (dx / segments) * (i + 1) + offsetX;
            let nextY = y1 + (dy / segments) * (i + 1) + offsetY;

            ctx.lineTo(nextX, nextY);
            currentX = nextX;
            currentY = nextY;
        }

        ctx.lineTo(x2, y2);
        ctx.stroke();

        ctx.shadowColor = '#ffffff';
        ctx.shadowBlur = 15;
        ctx.stroke();
        ctx.shadowBlur = 0;
    }

    let lightningTimer = 0;

    window.addEventListener('resize', function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });

    const mouse = { x: null, y: null };
    window.addEventListener('mousemove', function(event) {
        mouse.x = event.x;
        mouse.y = event.y;
    });

    const trailParticles = [];
    const trailColors = ['#ff0000', '#ff3333', '#ff6666', '#ff9999'];

    function createTrailParticle(x, y) {
        if (Math.random() > 0.7) return; 

        const particle = {
            x: x,
            y: y,
            size: Math.random() * 2 + 1,
            color: trailColors[Math.floor(Math.random() * trailColors.length)],
            life: 15,
            speedX: (Math.random() - 0.5) * 1.5,
            speedY: (Math.random() - 0.5) * 1.5
        };
        trailParticles.push(particle);
    }

    window.addEventListener('mousemove', function(event) {
        createTrailParticle(event.clientX, event.clientY);
    });

    function animateTrail() {
        ctx.globalAlpha = 0.6;
        for (let i = 0; i < trailParticles.length; i++) {
            const p = trailParticles[i];

            ctx.fillStyle = p.color;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
            ctx.fill();

            p.x += p.speedX;
            p.y += p.speedY;
            p.size -= 0.05;
            p.life--;

            if (p.life <= 0 || p.size <= 0) {
                trailParticles.splice(i, 1);
                i--;
            }
        }
        ctx.globalAlpha = 1;
    }

    function animateAll() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        lightningTimer++;
        if (lightningTimer > 200 && Math.random() > 0.8) {
            const x1 = Math.random() * canvas.width;
            const y1 = -10;
            const x2 = Math.random() * canvas.width;
            const y2 = canvas.height + 10;

            drawLightning(x1, y1, x2, y2);
            lightningTimer = 0;
        }

        animateTrail();
        document.querySelectorAll('.oath-text').forEach(el => {
            el.style.filter = 'url(#blood)';
        });

        requestAnimationFrame(animateAll);
    }

    animateAll();
});
    </script>
</body>
</html>

四：特效含义解析

1. 整体视觉风格特效

（1）红色主题色调

实现方式：

使用#c00(深红)和#f00(鲜红)作为主色调

含义：

红色象征危险、警示和鲜血
隐喻毒品带来的生命威胁和缉毒警察的牺牲
强烈的视觉冲击力吸引用户注意力

（2）渐变发光标题

实现方式：

css 复制代码

header {
  background: linear-gradient(135deg, #800, #c00, #800);
  animation: headerGlow 4s ease-in-out infinite alternate;
}
@keyframes headerGlow {
  from { background: linear-gradient(135deg, #600, #a00, #600); }
  to { background: linear-gradient(135deg, #c00, #f00, #c00); }
}

含义：

标题背景的脉动渐变象征禁毒斗争的持续进行
从暗红到鲜红的渐变暗示形势的严峻性升级

（3）脉冲光环

实现方式：

css 复制代码

header::before {
  animation: pulseRing 3s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.5); opacity: 0; }
  50% { opacity: 0.3; }
  100% { transform: scale(1.5); opacity: 0; }
}

含义：

逐渐消失的效果暗示禁毒工作的长期性和艰巨性
红色光环呼应主题，形成视觉焦点

2. 内容区块特效

（1）区块悬浮效果

实现方式：

css 复制代码

.section:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(204, 0, 0, 0.4);
}

含义：

增强的阴影暗示毒品危害的严重性
交互反馈增强用户参与感

（2）顶部流动渐变

实现方式：

css 复制代码

.section::before {
  background: linear-gradient(90deg, #c00, #e63946, #c00);
  background-size: 200% auto;
  animation: gradientFlow 3s linear infinite;
}

含义：

无限循环动画暗示工作的持续性
颜色变化隐喻斗争形势

3. 毒品图鉴特效

（1）图片悬停放大

实现方式：

css 复制代码

.drug-image-container:hover .drug-image {
  transform: scale(1.2);
  filter: grayscale(0%) brightness(0.6);
}

含义：

放大效果强调毒品的危险性
亮度降低营造危险氛围

（2）标签滑动出现

实现方式：

css 复制代码

.drug-label {
  transform: translateY(100%);
  transition: all 0.3s ease;
}
.drug-image-container:hover .drug-label {
  transform: translateY(0);
}

含义：

滑动出现的标签象征对毒品认知的揭示过程
延迟显示增强交互层次感

4. 缉毒警区块特效

（1）深色背景与动态网格

实现方式：

css 复制代码

.police-section::before {
  background: 
    linear-gradient(45deg, rgba(255,0,0,0.05) 25%, transparent 25%, ...),
    url('data:image/svg+xml,...');
  animation: policeBgMove 60s linear infinite;
}

含义：

深色背景象征缉毒工作的隐蔽性和危险性
极低透明度保持背景不干扰文字阅读

（2）故事光带流动

实现方式：

css 复制代码

.police-story::before {
  background: linear-gradient(90deg, transparent, rgba(241, 196, 15, 0.05), transparent);
  animation: storyGlow 3s infinite;
}

含义：

金色光带象征缉毒警察的荣誉和牺牲精神
低透明度保持背景不喧宾夺主

5. 誓言区块特效

（1）血液文字效果

实现方式：

css 复制代码

.oath-text {
  animation: bloodText 3s ease-in-out infinite alternate;
}
@keyframes bloodText {
  0% { text-shadow: 0 0 5px rgba(255,0,0,0.8); }
  100% { text-shadow: 0 0 40px rgba(255,0,0,0.4); }
}

含义：

血色阴影隐喻缉毒工作的危险性
脉动效果暗示誓言的永恒性

6. 警告系统特效

（1）脉冲警告图标

实现方式：

css 复制代码

.warning-sign {
  animation: warningPulse 2s infinite;
}
@keyframes warningPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
}

含义：

持续脉冲象征持续的危险警示
扩散的光影效果扩大警告范围
圆形设计呼应紧急按钮的通用符号

（2）模态框闪烁标题

实现方式：

css 复制代码

.warning-modal h2 {
  animation: titleFlicker 3s infinite;
}
@keyframes titleFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
  51% { opacity: 1; }
  52% { opacity: 0.97; }
}

含义：

微妙闪烁吸引用户注意力
不规则闪烁模式防止视觉疲劳
红色主题强化警告性质

7. Canvas特效

（1）随机闪电

实现方式：

javascript 复制代码

function drawLightning(x1, y1, x2, y2) {
  // 随机分支的闪电效果
}

含义：

闪电象征突发危险和缉毒行动的突然性
随机出现增强紧张氛围
白色闪电在深色背景上形成强烈对比

（2）鼠标轨迹粒子

实现方式：

javascript 复制代码

function createTrailParticle(x, y) {
  // 创建跟随鼠标的红色粒子
}

含义：

粒子轨迹象征用户与内容的互动
红色粒子呼应主题

（3）血液文字效果

实现方式：

css 复制代码

.oath-text {
  animation: bloodText 3s ease-in-out infinite alternate;
}
@keyframes bloodText {
  0% { text-shadow: 0 0 5px rgba(255,0,0,0.8); }
  100% { text-shadow: 0 0 40px rgba(255,0,0,0.4); }
}

含义：

血色阴影隐喻缉毒工作的危险性
脉动效果暗示誓言的永恒性