🚀 Projekt (7) Rakieta animowana HTML, CSS, Javascript i rocket animated

Kochani , zrobiłem animacje rakiety lecącej przez kosmos. Użyłem do tego HTML, CSS i Javascript.

Obiekt stworzyłem na podstawie referencyjnych zdjęć z Internetu. Kosmos, to jest coś magicznego, przestrzeń bezgraniczna.

🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

CSS3

.scene
{
    position: relative;
    width: 100%;
    height: 100vh;
    background: rgb(10, 10, 10);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

}
.scene i
{
position: absolute;
top: -250px;
background: rgba(11, 102, 207, 0.835);
animation: animateStars linear infinite;
}
@keyframes animateStars
{
0%
{
transform: translateY(0);
}
100%
{
    transform: translateY(150vh);
}
}
.scene .rocket
{
  position: relative;
 
  animation: animate 0.2s ease infinite; 
  
   
}
@keyframes animate
{
    0%, 100%
    {
        transform: translateY(-2px);
    }
    50%
    {
        transform: translateY(2px);
    }
}
.scene .rocket::before
{
content: '';
position: absolute;
bottom: -200px;
left: 28%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(rgba(209, 86, 14, 0.835), transparent);
}
.scene .rocket2
{
  position: relative;
  left: -150px;
  transform: translateX(-50%);
  animation: animate 0.2s ease infinite; 
   
}
@keyframes animate
{
    0%, 100%
    {
        transform: translateY(-2px);
    }
    50%
    {
        transform: translateY(2px);
    }
}
.scene .rocket2::before
{
content: '';
position: absolute;
bottom: -200px;
left: 28%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(rgba(209, 86, 14, 0.835), transparent);
}
.scene .rocket::after
{
content: '';
position: absolute;
bottom: -200px;
left: 68%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(rgba(209, 86, 14, 0.835), transparent);
filter: blur(20px);
}
.scene .rocket2
{
  position: relative;
  left: -150px;
  transform: translateX(-50%);
  animation: animate 0.2s ease infinite; 
   
}
@keyframes animate
{
    0%, 100%
    {
        transform: translateY(-2px);
    }
    50%
    {
        transform: translateY(2px);
    }
}
.scene .rocket2::after
{
content: '';
position: absolute;
bottom: -200px;
left: 68%;
transform: translateX(-50%);
width: 10px;
height: 200px;
background: linear-gradient(rgba(209, 86, 14, 0.835), transparent);
filter: blur(20px);
}

HTML i Javascript

<div>
  <div class="scene">
    <div class="rocket">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEh4hkXbz0xTOrnkJubf6-tejoT1U9Zk7AK2vdlWbs9vHcX7MVZaMwxQ9TbHlxw6Dm4u_OlfjrJsmJzgT0W3GvyrsZZKJDIChYwcICV_ol7yK7q8EaGfYs2BReKKvc5DBQYDlk3fQ49AUDZL6egh0fhlW93zy4-EBaNwPl5IZqoQlYSvFgY8NNKtQM7A" />
    </div>
    <div class="rocket2">
      <img src="https://blogger.googleusercontent.com/img/a/AVvXsEh4hkXbz0xTOrnkJubf6-tejoT1U9Zk7AK2vdlWbs9vHcX7MVZaMwxQ9TbHlxw6Dm4u_OlfjrJsmJzgT0W3GvyrsZZKJDIChYwcICV_ol7yK7q8EaGfYs2BReKKvc5DBQYDlk3fQ49AUDZL6egh0fhlW93zy4-EBaNwPl5IZqoQlYSvFgY8NNKtQM7A" />
  </div>
</div>
<script>
  function stars(){
    let count =70;
    let scene = document.querySelector('.scene');
    let i = 0;
    while(i < count){
      let star = document.createElement('i');
      let x = Math.floor(Math.random() * window.innerWidth);

let duration = Math.random() * 4;
      let h = Math.random() * 30;

star.style.left = x + 'px';
      star.style.width = 2 + 'px';
      star.style.height = h + 'px';
      star.style.animationDuration = duration + 's';
      
      scene.appendChild(star);
      i++

}
  }
  stars();
</script></div>

ATOM CRAFT MAXIMO

Szukaj na tym blogu

🚀 Projekt (7) Rakieta animowana HTML, CSS, Javascript i rocket animated

Komentarze