CSS 关键帧动画屏幕门效果

Question

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

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

Answer 1

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

它的作用是在图像顶部创建一个 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;
}

CSS 关键帧动画屏幕门效果

CSS Keyframe Animation Screen Door Effect

html

css

jquery

keyframe

css-animations