icône de chargement 3

977 byby.createsite

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

29 June 2025

Extrait de code du menu déroulant HTML

23 August 2025

Modèle HTML CSS de formulaire de connexion et d'inscription

25 April 2025

Un code de Metehan

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é

Extrait de code du menu déroulant HTML

Modèle HTML CSS de formulaire de connexion et d'inscription

Un code de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS