Animación de esfera CSS con efectos de desplazamiento

1,167 byby.createsite

Abrir en el editor Publica tu código

Animación de esfera CSS con efectos de desplazamiento

Recomendado

5 September 2025

Contenedor de animación de objetos de imagen HTML

22 June 2025

Plantilla de blog Tailwind CSS: modo oscuro, adaptable

6 September 2025

Estructura HTML de la barra de progreso animada CSS

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background: url("./thumb.jpg") no-repeat center center;
      background-color: black;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 25%;
      max-width: 75%;
      width: 75%;
      height: 25%;
      top:15%;
      overflow-y: hidden;
      box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .function       { color: #A6E22E; }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

.esfera {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: #ff69b4;
      animation: expandir 2s forwards;
    }

@keyframes expandir {
      0% { transform: scale(0); }
      100% { transform: scale(1); }
    }

.reflexo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #f2c464;
      opacity: 0.5;
      animation: aparecer 2s forwards;
      animation-delay: 1s;
    }

@keyframes aparecer {
      0% { opacity: 0; }
      100% { opacity: 0.5; }
    }

.esfera:hover .reflexo {
      animation: desaparecer 1s forwards;
    }

@keyframes desaparecer {
      0% { opacity: 0.5; }
      100% { opacity: 0; }
    }

.codigo {
      selector {
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #ff9900;
          animation: piscar 2s forwards;
          animation-delay: 2s;
        }
      }
    }

@keyframes piscar {
      0% { opacity: 0; }
      25% { opacity: 1; }
      50% { opacity: 0; }
      75% { opacity: 1; }
      100% { opacity: 0; }
    }

.esfera .glitter {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #e0d9e5;
      transform: translateY(-50px);
      animation: dar-um-broto 2s forwards;
      animation-delay: 1s;
    }

@keyframes dar-um-broto {
      0% { transform: translateY(0); }
      25% { transform: translateY(-50px); }
      50% { transform: translateY(50px); }
      75% { transform: translateY(-25px); }
      100% { transform: translateY(-25px); }
    }

.esfera .glitter:hover {
      animation: brilhar 1s forwards;
    }

@keyframes brilhar {
      0% { background: #e0d9e5; }
      100% { background: #f2c464; }
    }
  </style>
  <div class="animation-container">
    <div class="esfera">
      <div class="glitter"></div>
      <div class="glitter"></div>
      <div class="glitter"></div>
    </div>
    <div class="reflexo"></div>
  </div>
 
</head>
<body>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

body{
    background: rgb(251, 247, 247);
      overflow-x: hidden; }

}

.band{
    color: white;
    background-color: blueviolet;
    height: 30px ;

}

.band h1{
    padding: 10px;
    font: 1em sans-serif;
    text-align: center;
}

.logo{
    font-family: sans-serif;
    font-size: large;
    text-align: center;
    padding: 30px;

}

nav{
    height: 80px;
    background-color: rgb(251, 251, 251)
}
.hero{
    height: 400px;
    background-color: white;
    display: flex;
}

.hero .container{
display: flex;
height: 98%;
width: 100%;

}

.container img{
    width: 100%;
}

.content{
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    font-size: 40px;
    margin-top: -200px;
}

.content button{
height: 40px;
width: 150px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background-color: white;
color: black;
border:none;
border-radius: 3px;
}

.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:130px;
}

.title h1{
    font-family: sans-serif;
    font-size: 25px;
    margin-bottom: 50px;
}

.product{
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    height: 320px;
    width: 200px;
    flex-direction: column;
    display: flex;
}
.product img{
    height: 200px;
}
.product button{
    height: 50px;
    width: 200px;
    background-color: rgb(51, 47, 47);
    color: #ffffff;
    border: none;

}
.product h2{
margin-top: 20px;
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 15px;
margin-bottom: 20px;
text-align: center;

}
.product p{
    font-family: sans-serif;
    font-size: 15px;
    position: relative;
    color: rgb(0, 0, 0);
    left: 160px;
    
}

.product-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product {
    margin: 10px;
}