无需 JS、CSS 或图像的动画？！😲 纯 HTML 动画！

我最近创建了一个不使用 JS、CSS 或 HTML 的倒计时器。

然后我更进一步，用纯 CSS（没有 JS！）构建了一个密码生成器

但现在我变得更加疯狂了！

我向您展示一个不使用任何图像的动画......

不使用任何 CSS 的动画...

不使用任何 JavaScript 的动画......

这一切都是用纯 HTML 完成的！

警告：如果您患有癫痫、运动敏感（前庭疾病）或正在使用屏幕阅读器，您可能不应该点击该链接......这又是一个愚蠢的实验，不应该在现实世界中使用，不幸的是无法访问！）

点击此处体验它的全部魅力！（抱歉，我无法在 dev.to 上运行它！）

剧透位于下方，因此请确保在向下滚动之前单击链接并查看其实际效果！

.
...
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​

剧透！

是的，我确实用 ASCII 文本给你做了 Rick Roll！

我把这幅作品命名为“Rick ASCII-ly”（呻吟）🤣

那么到底发生了什么？

共有 44 页，每页包含我们 ASCII 视频的不同“帧”。

然后设置每个框架自动加载下一页<meta http-equiv="refresh" content="0; URL = {next page URL}">

然后最后一页指向第一页，形成无限循环！

1.php -> 2.php -> [...] -> 44.php -> 1.php 并且循环继续。

通过将元刷新的延迟设置为 0，并且使用足够快的连接（或者当所有图像都在本地缓存时），它实际上表现得相当好（事实上它有点太快了！）......只是可惜我不能用纯 HTML 播放音频！

您是如何创建这些框架的？

我使用了一个在线工具（编辑：遗憾的是自从写这篇文章以来它已经不存在了，但我相信还有其他工具）将 GIF 转换为 ASCII 艺术的每一帧。

然后我将 ASCII 文本复制到<pre>每个页面的元素中，并以编程方式将重定向设置到下一个框架。

请注意，尽管文件扩展名是，.php但仍然可以使用.html。这里没有服务器端的魔法，我只是在测试期间将文件设置为 PHP，以便可以运行一些检查，并且从未对其进行过更改。

火狐浏览器

如果您最初在 Chrome 中查看它，那么您也应该在 FireFox 中查看它，他们似乎尝试使用语法突出显示来解释符号（因为它们显示在标签内），因此您可以免费<pre>获得一些（奇怪的）颜色！

兼容性

这一直支持到Netscape Navigator 1.1 版本——它是世界上兼容性最好的动画格式！——不知道“caniuse”会不会把它添加到他们的数据库中？😋🤣

为什么？

它有实际用途吗？没有。

它触发了 Mod Sec 并发送了太多请求，导致我的服务器被锁定了吗？绝对会！

周五有点意思吗？是的

大家周末愉快，你们用 ASCII 文本打败了 rick rolled，所以我赢得了今天的互联网🤣！

如果您因此而讨厌我，请发表评论！

哦，不要害怕在社交媒体上分享它 - 我想看看我的服务器是否可以每秒处理数千个请求😁 - 免费压力测试哇哦！