Animation de sphère CSS avec effets de survol

879 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Animation de sphère CSS avec effets de survol

Recommandé

28 December 2024

un système créé avec des répertoires

4 December 2025

Bouton HTML animé avec SVG et texte

25 June 2025

Un code de Mete

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

Recommandé

un système créé avec des répertoires

Bouton HTML animé avec SVG et texte

Un code de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS