护眼警告：禁止使用F12查看源码

一、简介

二、界面设计

1. 整体布局：页面整体布局简洁，背景初始为黑色，占据整个浏览器窗口，去除了外边距和内边距，保证视觉上的统一和专注。
2. 警告文字：页面中央有一个醒目的警告文字 “警告！你别再 F12 了！”，使用了较大的字体（4vw），并采用了特定的字体组合（'Impact',' 微软雅黑 ',Arial,sans-serif），确保在不同设备上都能清晰显示。文字带有闪烁和抖动的动画效果，进一步吸引用户的注意力。

三、动画效果

1. 文字动画
   • 抖动效果：通过shk动画，文字在水平和垂直方向上有轻微的偏移，并伴有小角度的旋转，模拟出抖动的效果，增加视觉上的冲击力。
   • 亮度和模糊变化：bounce动画让文字的亮度和模糊度不断变化，从较暗且模糊的状态过渡到明亮清晰的状态，营造出闪烁的效果。
2. 闪烁效果
   • 背景色闪烁：使用 JavaScript 定时函数setInterval，每隔 18 毫秒（约 55 次 / 秒）随机切换背景颜色，颜色组合丰富多样，包括白色、黑色、各种鲜艳的颜色等，形成爆闪的视觉效果。
   • 文字颜色随机切换：文字颜色也会随机变化，每三次切换中有一次为白色，其余为其他随机颜色，增加了视觉上的混乱感。
   • 字体阴影和滤镜变化：偶尔会切换字体的阴影和滤镜效果，进一步增强刺激感。
3. 屏幕摇动：文字还会在水平和垂直方向上有轻微的随机偏移和旋转，模拟出屏幕轻微摇动的效果，给用户带来不稳定的视觉体验。

四、音频效果

五、持续时间和结束效果

1. 持续时间：整个警告效果持续 20 秒（可通过修改DURATION变量的值来调整持续时间）。
2. 结束效果：20 秒后，通过setTimeout函数清除闪烁定时器，停止背景色和文字颜色的闪烁，将背景颜色恢复为白色，将警告文字改为 “行了吧？别扒源代码了！”，并调整文字颜色和阴影，同时暂停音频播放，结束警告状态。

六、代码实现

1. HTML 结构：页面结构简单，包含一个div元素用于显示警告文字，以及一个script标签用于实现动态效果。
2. CSS 样式：通过定义warntxt类来设置警告文字的样式，包括位置、字体、颜色、动画等。同时，使用@keyframes定义了两个动画shk和bounce。
3. JavaScript 代码：使用 JavaScript 实现了背景色和文字颜色的闪烁效果、屏幕摇动效果、音频播放和停止，以及定时结束警告状态的功能。