Estoy trabajando en una página de un juego de terror en la cual la capa de fondo es una imagen de terror, pero la capa de frente es de color negro.
Lo que quiero lograr es un efecto en el cual se vea una imagen negra con letras y que en determinado momento el fondo negro haga un parpadeo (estilo flashes) y se vea la imagen de fondo. El estilo es como en los vídeos en el cuales está el cuarto oscuro y la luz hace flashes y se ve un fondo terrorífico.
El efecto funciona bien, pero el problema es que la primer capa no la toma pero si hacen el efecto las letras, lo cual no es necesario hacerlo y no puedo resolverlo.
body {
background-image: url(https://memeworld.funnyjunk.com/pictures/A+chernobyl+horror+story+by+stefan+koidl_27d56d_7079691.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.flicker-4 {
background-color: #000;
color: #fff;
-webkit-animation: flicker-4 8s linear infinite both;
animation: flicker-4 8s linear infinite both;
}
@-webkit-keyframes flicker-4 {
0%,
100% {
opacity: 1;
}
31.98% {
opacity: 1;
}
32% {
opacity: 0;
}
32.8% {
opacity: 0;
}
32.82% {
opacity: 1;
}
34.98% {
opacity: 1;
}
35% {
opacity: 0;
}
35.7% {
opacity: 0;
}
35.72% {
opacity: 1;
}
36.98% {
opacity: 1;
}
37% {
opacity: 0;
}
37.6% {
opacity: 0;
}
37.62% {
opacity: 1;
}
67.98% {
opacity: 1;
}
68% {
opacity: 0;
}
68.4% {
opacity: 0;
}
68.42% {
opacity: 1;
}
95.98% {
opacity: 1;
}
96% {
opacity: 0;
}
96.7% {
opacity: 0;
}
96.72% {
opacity: 1;
}
98.98% {
opacity: 1;
}
99% {
opacity: 0;
}
99.6% {
opacity: 0;
}
99.62% {
opacity: 1;
}
}
@keyframes flicker-4 {
0%,
100% {
opacity: 1;
}
31.98% {
opacity: 1;
}
32% {
opacity: 0;
}
32.8% {
opacity: 0;
}
32.82% {
opacity: 1;
}
34.98% {
opacity: 1;
}
35% {
opacity: 0;
}
35.7% {
opacity: 0;
}
35.72% {
opacity: 1;
}
36.98% {
opacity: 1;
}
37% {
opacity: 0;
}
37.6% {
opacity: 0;
}
37.62% {
opacity: 1;
}
67.98% {
opacity: 1;
}
68% {
opacity: 0;
}
68.4% {
opacity: 0;
}
68.42% {
opacity: 1;
}
95.98% {
opacity: 1;
}
96% {
opacity: 0;
}
96.7% {
opacity: 0;
}
96.72% {
opacity: 1;
}
98.98% {
opacity: 1;
}
99% {
opacity: 0;
}
99.6% {
opacity: 0;
}
99.62% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Terror Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/06494d4185.js" crossorigin="anonymous"></script>
</head>
<body class="flicker-4">
<div class="container">
<h1 class="text-center pt-5">Terror Site</h1>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Codigo actualizado
body {
background-image: url(https://memeworld.funnyjunk.com/pictures/A+chernobyl+horror+story+by+stefan+koidl_27d56d_7079691.jpg);
background-size: cover;
margin: 0;
}
.flicker-4 {
background-color: #000;
color: #fff;
height: 100vh;
-webkit-animation: flicker-4 6s linear infinite both;
animation: flicker-4 6s linear infinite both;
}
@keyframes flicker-4 {
0%,
100% {
opacity: 1;
}
31.98% {
opacity: 1;
}
32% {
opacity: 0;
}
32.8% {
opacity: 0;
}
32.82% {
opacity: 1;
}
34.98% {
opacity: 1;
}
35% {
opacity: 0;
}
35.7% {
opacity: 0;
}
35.72% {
opacity: 1;
}
36.98% {
opacity: 1;
}
37% {
opacity: 0;
}
37.6% {
opacity: 0;
}
37.62% {
opacity: 1;
}
67.98% {
opacity: 1;
}
68% {
opacity: 0;
}
68.4% {
opacity: 0;
}
68.42% {
opacity: 1;
}
95.98% {
opacity: 1;
}
96% {
opacity: 0;
}
96.7% {
opacity: 0;
}
96.72% {
opacity: 1;
}
98.98% {
opacity: 1;
}
99% {
opacity: 0;
}
99.6% {
opacity: 0;
}
99.62% {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Terror Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/06494d4185.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flicker-4">
<div class="container">
<h1 class="text-center pt-5">Terror Site</h1>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>