icono de carga 3

Abrir en el editor Publica tu código

Recomendado

11 December 2024

Animaciones controladas por desplazamiento

HTML

CSS

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 background: black;
 width: 100vw;
 height: 100vh;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 font-family: 'Playfair Display', serif;
 overflow: hidden;
}
/*barra de carregamento */
.loading-container{
 width:150px;
 height:300px;
 background-image: linear-gradient(#f5f5f5, #f5f5f5);
 background-repeat:no-repeat;
 background-size:100% 0%;
 rotate:180deg;
 border-radius:30px;
 margin-right:35px;
 box-shadow: 0 0 20px 5px rgba(128, 0, 128, 0.5);
}
/*fones de ouvido iguais aproveitando o display flex center */
.headphone1, .headphone-2{
 display:flex;
 flex-direction:column;
}
/*animacao para o fone de ouvido inteiro 1 */
.headphone-1{
 animation: comeFromTopAndFade 12s linear forwards;
}
@keyframes comeFromTopAndFade{
 0%{
  transform: translateY(-300%);
 }
 20%{   
  transform: translateY(0);
 }
 95%{
  transform: translateY(0);
 }
 96%{
  transform: translateX(0)rotateY(0);
 }
 100%{
  transform:translateX(-3000%) rotateY(180deg);
 }
}
/*animacao para o fone de ouvido 2 */
.headphone-2{
 animation: comeFromBottomAndFade 12s linear forwards;
}
@keyframes comeFromBottomAndFade{
 0%{
  transform: translateY(300%);
 }
 20%{   
  transform: translateY(0);
 }
 95%{
  transform: translateY(0);
 }
 96%{
  transform: translateX(0)rotateY(0);
 }
 100%{
  transform:translateX(3970%) rotateY(180deg);

}
}
/*animacao de carregamento com sincronia com os fones */
.loading-container{
 opacity:1;
 animation: loadAndFade 12s linear forwards;
}
@keyframes loadAndFade{
 0%{background-size: 100% 0%;opacity:1;}
 40%{background-size: 100% 100%;}
 95%{opacity:1}
 100%{background-size:100% 100%;opacity:0;}
}
/*cabo dos fones iguais aproveitando o flex */
.headphone-1 .base, .headphone-2 .base{
 height: 100px;
 width:10px;
 background:#f5f5f5;
 border-radius:3px;
 display:flex;
 align-items:flex-end;
 box-shadow: 0 0 20px 5px rgba(128, 0, 128, 0.5);
}
/*marca preta no fim do cabo dos fones */
.headphone-1 .base::before, .headphone-2 .base::before{
 content:'';
 width:10px;
 height:5px;
 margin-bottom:50%;
 background:rgb(0, 0, 0);
}
/*cabeca dos fones */
.headphone-1 .head, .headphone-2 .head{
 width:45px;
 height:45px;
 background:#f5f5f5;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow: 0 0 20px 5px rgba(128, 0, 128, 0.5);
}
/*ajustando cabeca 1 por causa do flex */
.headphone-1 .head{
 transform: translateX(-35px);
}
/*buraco na cabeca dos fones */
.headphone-1 .head::before, .headphone-2 .head::before{
 content:'';
 background:rgb(0, 0, 0);
 border-radius:50%;
 width:5px;
 height:5px;
}
/*margens opostas para os furos */
.headphone-2 .head::before{
 margin-left:50%;
}
.headphone-1 .head::before{
 margin-right:50%;
}

icono de carga 3

Recomendado

Cargador resplandeciente

Cargador de Pulso en CSS

Animaciones controladas por desplazamiento

HTML

CSS

JS

Recomendado

Cargador resplandeciente

Cargador de Pulso en CSS

Animaciones controladas por desplazamiento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS