文章最后更新时间:2025-06-28 22:10:46
本项目是一个创意十足的HTML单文件源码,旨在警告用户不要随意按下 F12 键查看网页源代码。当网页加载后,一旦按F12启用开发者模式,就会通过一系列视觉和听觉上的强烈刺激,提醒用户停止这种行为,为网页增添了一份趣味性和独特性。
![图片[1]|护眼警告:禁止使用F12查看源码|黑猫BLOG](https://www.520ak.com/wp-content/themes/zibll/img/thumbnail-lg.svg)
![图片[2]|护眼警告:禁止使用F12查看源码|黑猫BLOG](https://www.520ak.com/wp-content/themes/zibll/img/thumbnail-lg.svg)
- 整体布局:页面整体布局简洁,背景初始为黑色,占据整个浏览器窗口,去除了外边距和内边距,保证视觉上的统一和专注。
- 警告文字:页面中央有一个醒目的警告文字 “警告!你别再 F12 了!”,使用了较大的字体(4vw),并采用了特定的字体组合('Impact',' 微软雅黑 ',Arial,sans-serif),确保在不同设备上都能清晰显示。文字带有闪烁和抖动的动画效果,进一步吸引用户的注意力。
- 文字动画
- 抖动效果:通过
shk
动画,文字在水平和垂直方向上有轻微的偏移,并伴有小角度的旋转,模拟出抖动的效果,增加视觉上的冲击力。
- 亮度和模糊变化:
bounce
动画让文字的亮度和模糊度不断变化,从较暗且模糊的状态过渡到明亮清晰的状态,营造出闪烁的效果。
- 闪烁效果
- 背景色闪烁:使用 JavaScript 定时函数
setInterval
,每隔 18 毫秒(约 55 次 / 秒)随机切换背景颜色,颜色组合丰富多样,包括白色、黑色、各种鲜艳的颜色等,形成爆闪的视觉效果。
- 文字颜色随机切换:文字颜色也会随机变化,每三次切换中有一次为白色,其余为其他随机颜色,增加了视觉上的混乱感。
- 字体阴影和滤镜变化:偶尔会切换字体的阴影和滤镜效果,进一步增强刺激感。
- 屏幕摇动:文字还会在水平和垂直方向上有轻微的随机偏移和旋转,模拟出屏幕轻微摇动的效果,给用户带来不稳定的视觉体验。
- 持续时间:整个警告效果持续 20 秒(可通过修改
DURATION
变量的值来调整持续时间)。
- 结束效果:20 秒后,通过
setTimeout
函数清除闪烁定时器,停止背景色和文字颜色的闪烁,将背景颜色恢复为白色,将警告文字改为 “行了吧?别扒源代码了!”,并调整文字颜色和阴影,同时暂停音频播放,结束警告状态。
- HTML 结构:页面结构简单,包含一个
div
元素用于显示警告文字,以及一个script
标签用于实现动态效果。
- CSS 样式:通过定义
warntxt
类来设置警告文字的样式,包括位置、字体、颜色、动画等。同时,使用@keyframes
定义了两个动画shk
和bounce
。
- JavaScript 代码:使用 JavaScript 实现了背景色和文字颜色的闪烁效果、屏幕摇动效果、音频播放和停止,以及定时结束警告状态的功能。
这个项目通过视觉和听觉上的强烈刺激,有效地警告用户不要随意按下 F12 键查看网页源代码,为网页增添了一份独特的趣味性和互动性。
温馨提示:
本文最后更新于
2025-06-28 22:10:46
,某些文章具有时效性,若有错误或已失效,请在下方
留言或联系
黑猫
。
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
暂无评论内容