Animación de esfera CSS con efectos de desplazamiento

730 byby.createsite

Abrir en el editor Video Publica tu código

Animación de esfera CSS con efectos de desplazamiento

Recomendado

20 June 2024

galería de animales

17 July 2025

Plantilla HTML del panel de control de Couture Atelier

1 August 2024

Diseño de interfaz de usuario de tarjeta de producto

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;
}

Recomendado

galería de animales

Plantilla HTML del panel de control de Couture Atelier

Diseño de interfaz de usuario de tarjeta de producto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS