单击 html、css 和 javascript 中的 a 标签时如何创建视频过渡

Question

我正在尝试使用隐藏且高度为 0% 的视频在 html 页面之间创建过渡。我不知道从哪里开始，希望在这个问题上得到一些指导。这是到目前为止我的代码

重点是，当单击导航中的 a 链接时，将显示视频的可见性，并将宽度设置为 100%，并且将启动 1.5 秒的延迟计时器。然后，当视频播放时，整个页面将开始模糊，1.5 秒后，用户将切换到所需的页面。用户更改页面后，到目前为止的效果将反向返回到 0px 模糊，视频不透明度将返回到 0，可见性设置回隐藏。

我尝试将 a:active 设置为 html 并且它有效，但仅适用于导航栏。然后我查找了我需要的一些小片段，但对如何将它们组合在一起感到困惑，因此我从 about 提供的图片中排除了该代码。

Answer 1

您应该在 HTML 中创建一个隐藏的视频容器 单击导航链接时，显示视频容器并启动计时器 在计时器延迟期间，对页面应用模糊效果。 延迟后，导航到新页面，同时反转效果