0

estoy trabajando en una animación con CSS y no se como conseguir un efecto con una de las imágenes. Necesito que la luz del faro (que es una imagen aparte) gire para adentro desde lo que sería el punto de emisión de la luz, como si la luz diera vueltas. He estado probando con los z-index de los diferentes div pero no he podido dar con la solución. También he logrado hacer que gire la luz del faro pero de forma que la imagen gira desde su centro y no desde un ángulo en concreto. Adjunto HMTL y CSS.

#fondo {
    display: inline-block;
    height: 450px;
    width: 600px;
    border: 1px solid black;
    background-image: url("https://i.sstatic.net/iYbSl.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 7;
}

#nube{
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("./17538.jpg");
    position: absolute;
    top: 80px;
    left: 10px;
    animation: nube 500s linear;
    z-index: 6; 
}

#pajaro{
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/bfdtZ.gif");
    position: absolute;
    animation: pajaro 40s linear forwards;
    z-index: 6; 
}

#barco{
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/AtnJb.png");
    position: absolute;
    top: 200px;
    left: 10px;
    animation: barco 140s linear forwards;
    z-index: 4;
}

#del {
    position: absolute;
    display: inline-block;
    height: 450px;
    width: 600px;
    background-image: url("./17538.jpg");
    z-index: 5;
}


#luz {
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/ZxquD.png");
    position: absolute;
    top: 120px;
    left: 90px;
    animation: luz 5s ease-in-out alternate infinite;
     -webkit-animation: luz 5s ease-in-out alternate infinite;
    z-index: 5; 
}

#faro {
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/4jQBZ.png");
    position: absolute;
    top: 50px;
    left: 400px;
    z-index: 5;
}


@keyframes barco {
    0%   {left:10px; top:200px;}
    99% {opacity: 1; left:620px; top:200px;}
    100% {opacity: 0; display:none; left:620px; top:200px;}
}

@keyframes nube {
    0%   {left:10px; top:90px;}
    100% {left:700px; top:90px;}
}

@keyframes pajaro {
    0%   {left:580px; top:90px;}
    100% {left:-30px; top:90px;}
}
<!DOCTYPE html>
<html>
<head>
<title>Animacion Faro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="fondo"></div>
    <div id="faro"></div>
    <div id="luz"></div>
    <div id="barco"></div>
    <div id="nube"></div>
    <div id="pajaro">
        <div id="pajaro1"></div>
        <div id="pajaro2"></div>
    </div>
    <div id="del"></div> 

</body>
</html>

Fondo

Barco

Faro

Luz

nube

pajaro

También me gustaría saber como poder hacer que las imágenes que se desplazan fuera del div puedan desaparecer de manera progresiva conforme van cruzando el borde del div. Gracias de antemano.

1

2 respuestas 2

2

puedes hacerlo utilizando transform y scale

ejemplo

#fondo {
    display: inline-block;
    height: 450px;
    width: 600px;
    border: 1px solid black;
    background-image: url("https://i.sstatic.net/iYbSl.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 7;
}

#nube{
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("./17538.jpg");
    position: absolute;
    top: 80px;
    left: 10px;
    animation: nube 500s linear;
    z-index: 6; 
}

#pajaro{
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/bfdtZ.gif");
    position: absolute;
    animation: pajaro 40s linear forwards;
    z-index: 6; 
}

#barco{
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/AtnJb.png");
    position: absolute;
    top: 200px;
    left: 10px;
    animation: barco 140s linear forwards;
    z-index: 4;
}

#del {
    position: absolute;
    display: inline-block;
    height: 450px;
    width: 600px;
    background-image: url("./17538.jpg");
    z-index: 5;
}


#luz {
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/ZxquD.png");
    position: absolute;
    top: 120px;
    left: 90px;
    animation: luz 5s ease-in-out alternate infinite;
     -webkit-animation: luz 5s ease-in-out alternate infinite;
    z-index: 5; 
}

#faro {
    height: 1300px;
    width: 800px;
    background-repeat: no-repeat;
    background-image: url("https://i.sstatic.net/4jQBZ.png");
    position: absolute;
    top: 50px;
    left: 400px;
    z-index: 5;
}


@keyframes barco {
    0%   {left:10px; top:200px;}
    99% {opacity: 1; left:620px; top:200px;}
    100% {opacity: 0; display:none; left:620px; top:200px;}
}

@keyframes nube {
    0%   {left:10px; top:90px;}
    100% {left:700px; top:90px;}
}

@keyframes pajaro {
    0%   {left:580px; top:90px;}
    100% {left:-30px; top:90px;}
}
@keyframes luz {
  0% {-webkit-transform:  scaleX(1); opacity:1;}
  50% {-webkit-transform:  scaleX(0); opacity:0; }
  100% {left: 120px; -webkit-transform:  scaleX(-1); opacity:1;

  }
}
<!DOCTYPE html>
<html>
<head>
<title>Animacion Faro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="fondo"></div>
    <div id="faro"></div>
    <div id="luz"></div>
    <div id="barco"></div>
    <div id="nube"></div>
    <div id="pajaro">
        <div id="pajaro1"></div>
        <div id="pajaro2"></div>
    </div>
    <div id="del"></div> 

</body>
</html>

1

He probado hacer el uso de rotateY con el agregado de un par de keyframes.

Es un agregado a la animación la cual he cambiado a fade in-out + rotate.

Note que además debes corregir, o el centro de la imagen, o un lado de la imagen de la luz del faro, para que al rotar el efecto sea el correcto

#fondo {
  display: inline-block;
  height: 450px;
  width: 600px;
  border: 1px solid black;
  background-image: url("https://i.sstatic.net/iYbSl.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 7;
}

#nube {
  height: 1300px;
  width: 800px;
  background-repeat: no-repeat;
  background-image: url("https://i.sstatic.net/aqXgt.png");
  position: absolute;
  top: 80px;
  left: 10px;
  animation: nube 500s linear;
  z-index: 6;
}

#pajaro {
  height: 1300px;
  width: 800px;
  background-repeat: no-repeat;
  background-image: url("https://i.sstatic.net/bfdtZ.gif");
  position: absolute;
  animation: pajaro 40s linear forwards;
  z-index: 6;
}

#barco {
  height: 1300px;
  width: 800px;
  background-repeat: no-repeat;
  background-image: url("https://i.sstatic.net/AtnJb.png");
  position: absolute;
  top: 200px;
  left: 10px;
  animation: barco 140s linear forwards;
  z-index: 4;
}

#del {
  position: absolute;
  display: inline-block;
  height: 450px;
  width: 600px;
  background-image: url("./17538.jpg");
  z-index: 5;
}


#luz {
  height: 1300px;
  width: 800px;
  margin-left: 15px;
  background-repeat: no-repeat;
  background-image: url("https://i.sstatic.net/ZxquD.png");
  position: absolute;
  top: 120px;
  left: 90px;
  opacity: 1;
  animation: fade 2s linear infinite, rotateY 8s infinite linear;
  z-index: 5;
}

@keyframes fade {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@keyframes rotateY {
  to {
    transform: rotateY(360deg);
  }
}

#faro {
  height: 1300px;
  width: 800px;
  background-repeat: no-repeat;
  background-image: url("https://i.sstatic.net/4jQBZ.png");
  position: absolute;
  top: 50px;
  left: 400px;
  z-index: 5;
}


@keyframes barco {
  0% {
    left: 10px;
    top: 200px;
  }

  99% {
    opacity: 1;
    left: 620px;
    top: 200px;
  }

  100% {
    opacity: 0;
    display: none;
    left: 620px;
    top: 200px;
  }
}

@keyframes nube {
  0% {
    left: 10px;
    top: 90px;
  }

  100% {
    left: 700px;
    top: 90px;
  }
}

@keyframes pajaro {
  0% {
    left: 580px;
    top: 90px;
  }

  100% {
    left: -30px;
    top: 90px;
  }
}

@keyframes luz {
  0% {
    left: 580px;
    top: 90px;
  }

  100% {
    left: -30px;
    top: 90px;
  }
}
<!DOCTYPE html>
<html>

  <head>
    <title>Animacion Faro</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="fondo"></div>
    <div id="faro"></div>
    <div id="luz"></div>
    <div id="barco"></div>
    <div id="nube"></div>
    <div id="pajaro">
      <div id="pajaro1"></div>
      <div id="pajaro2"></div>
    </div>
    <div id="del"></div>
  </body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.