icône de chargement 3

1112 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

9 December 2024

Survol de la souris Retourner l'image

22 July 2025

Page de destination du Samsung Galaxy S24 Ultra

23 August 2025

Modèle HTML pour la conception de sites Web, l'expérience numérique et les podcasts

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

Recommandé

Survol de la souris Retourner l'image

Page de destination du Samsung Galaxy S24 Ultra

Modèle HTML pour la conception de sites Web, l'expérience numérique et les podcasts

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS