CSS关键帧动画屏幕门效果[关闭]答案

【问题标题】：CSS Keyframe Animation Screen Door Effect [closed]CSS关键帧动画屏幕门效果[关闭]
【发布时间】：2017-08-19 02:05:57
【问题描述】：

我已经在我的网页上实现了此演示 https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html 中的代码。正如您在演示中看到的那样，背景图像具有屏幕门效果，就像您在 VR 耳机中看到的那样。在我的网页上它有点糟糕，可能是因为与演示相比，我的图像亮度。我意识到这可能是为了提高性能，但是有没有办法将分辨率设置得更高？我想尽可能减少像素化。我似乎找不到任何甚至讨论这个问题的帖子。

我的照片中的天空很晴朗，但在页面上呈现出大点（见图）。

【问题讨论】：

您需要在此处发布一个显示问题的最小标记示例：minimal reproducible example 如果该站点将来消失或更改，指向其他站点的链接将没有任何好处.
我明白了，你不知道答案。我链接到代码的详细示例。如果您没有任何有用的话，请不要评论我的问题。这是一个简单的问题，任何知道答案的人都会从我已经发布的有或没有链接示例的内容中获得大量信息。此外，您引用的“链接”是指导方针，而不是要求。
@tony95 这与我们是否知道答案无关，这是一个网站规则。 “我的代码不工作”问题必须有一个 MCVE在问题本身。
这是一个关于关键帧的一般问题，我不认为这是代码。其次，我不知道问题出在哪里，因此链接到示例是呈现问题的最清晰方式，而无需在我的评论中重新发布整个示例。第三，我从未见过这样的规则，即对于每个关于代码的问题，问题本身都需要代码，如果存在，请链接到该规则。

标签： jquery css html css-animations keyframe

【解决方案1】：

这是我在您发布的链接上看到的一些负责纹理的代码。

它的作用是在图像顶部创建一个带有透明重复图像的 div。这会在任何图像之上提供纹理，是理想的解决方案，因为您可以轻松更换图像并保留纹理。

.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

【讨论】：

来自评论：此答案被标记为低质量。虽然答案总是很受欢迎，但它确实有助于提供一些关于您的代码如何解决手头问题的信息。不是每个人都熟悉您的确切编码逻辑，但可能了解您的一般方法或概念。为了帮助改进您的答案，请提供一些context surrounding it，并查看writing great answers 上的帮助文章以获取有关如何使您的答案重要的一些提示：)
那么，这如何提高关键帧背景图像的分辨率或减少图像像素化？它没有。
更新了回复和答案。它根本不应该影响背景图像，只需在图像的 op 上提供纹理即可。
由于它来自示例，它已经在我的代码中实现。您似乎只是在说明关键帧背景动画的基本功能，而不是解决问题，即专门减少像素化和/或提高图像分辨率。
因此该模式不适用于性能。如果分辨率需要改进，您可能需要更好的图像，具体取决于您查看的内容。