详情
评论
问答

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

文章最后更新时间:2025-06-28 22:10:46

一、简介

本项目是一个创意十足的HTML单文件源码,旨在警告用户不要随意按下 F12 键查看网页源代码。当网页加载后,一旦按F12启用开发者模式,就会通过一系列视觉和听觉上的强烈刺激,提醒用户停止这种行为,为网页增添了一份趣味性和独特性。

图片[1]|护眼警告:禁止使用F12查看源码|黑猫BLOG

图片[2]|护眼警告:禁止使用F12查看源码|黑猫BLOG

二、界面设计

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

三、动画效果

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

四、音频效果

为了进一步增强警告的效果,页面加载时会自动播放一段音频。音频通过HTML5audio元素实现,音频源为https://www.520ak.com/music/f12.mp3,音频设置为自动播放和循环播放,并且隐藏了音频控件,避免影响页面的整体美观。

五、持续时间和结束效果

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

六、代码实现

  1. HTML 结构:页面结构简单,包含一个div元素用于显示警告文字,以及一个script标签用于实现动态效果。
  2. CSS 样式:通过定义warntxt类来设置警告文字的样式,包括位置、字体、颜色、动画等。同时,使用@keyframes定义了两个动画shkbounce
  3. JavaScript 代码:使用 JavaScript 实现了背景色和文字颜色的闪烁效果、屏幕摇动效果、音频播放和停止,以及定时结束警告状态的功能。
这个项目通过视觉和听觉上的强烈刺激,有效地警告用户不要随意按下 F12 键查看网页源代码,为网页增添了一份独特的趣味性和互动性。
温馨提示: 本文最后更新于2025-06-28 22:10:46,某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 黑猫
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
THE END
喜欢就支持一下吧~
点赞1560赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容