Animation CSS autour d'un cadre

dsigmoun · Mars 1, 2024, 4:27

Bonjour à tous,

Sur mon design, j’affiche un cadre html avec ce code.


<!-- PRINCIPALE -->
<div style="
width:100%;
box-shadow: 2px 2px 10px rgba(0, 0, 0,1);">

<!-- BANDEAU -->
<div align=center style="color:rgba(0,0,0,1);
font-size:20px;
height:24px;
background-color: rgba(0, 0, 0,1);
padding-top:-1px;

background-color: rgba(0, 0, 0,1);
"
></div> <!-- BANDEAU -->     
                                                     
  
<!-- TEXTE TITRE -->
<div align=center style="color:rgba(255,255,255,1);
font-size:24px;
height:24px;
background-color: transparent! ;
margin-top:-30px;
font-family:Unica One; 
font-weight:normal;
text-shadow: 0px 0px 6px #000000; "
>Conso. électrique</div> <!-- TEXTE TITRE -->


<!-- CONTENU -->
<div style="height:420px;  background-color: rgba(33,33,33,1); "> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>

</div>

J’aimerai y amener un peu de vie en y intégrant cette animation (uniquement la partie tournante, pas celle au survol) https://codepen.io/Rplus/pen/abPLGx

Un pro du CSS serait-il l’adapter afin de pouvoir l’utiliser dans Jeedom ?

Merci !

Furaxworld · Mars 1, 2024, 5:31

123

Animation.html.txt (1,4 Ko)

anthopocket · Mars 1, 2024, 8:09

par curiosité, comment on s’en sert de ce code?widget?personalisation CSS?

dsigmoun · Mars 1, 2024, 10:21

Merci beaucoup @Furaxworld

Première tentative ce soir. Mon animation part un peu dans ton les sens…
Je referrai de nouveaux essaies demain !


<style>
  .bb::before, .bb::after, .bb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .bb {
    width: 610px;
    height: 440px;
    margin: auto;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  }
 
  .bb::before, .bb::after {
    content: "";
    z-index: -1;
    margin: -8px;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
  .bb::before {
    animation-delay: -4s;
  }

  @keyframes clipMe {
    0%, 100% {
      clip: rect(0px, 4400px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 440px, 0px);
    }
    50% {
      clip: rect(438px, 4400px, 650px, 0px);
    }
    75% {
      clip: rect(0px, 650px, 650px, 648px);
    }
  }
  html,
  body {
  }

  body {
    position: relative;
    background-color: #0f222b;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
</style>
<body>

<div class="bb"
style="
width : 520px;
box-shadow: 2px 2px 10px rgba(0, 0, 0,1);">

<!-- BANDEAU -->
<div align=center style="color:rgba(0,0,0,1);
font-size:20px;
height:24px;
background-color: rgba(0, 0, 0,1);
padding-top:-1px;

background-color: rgba(0, 0, 0,1);
"
></div> <!-- BANDEAU -->     
                                                     
  
<!-- TEXTE TITRE -->
<div align=center style="color:rgba(255,255,255,1);
font-size:24px;
height:24px;
background-color: transparent! ;
margin-top:-30px;
font-family:Unica One; 
font-weight:normal;
text-shadow: 0px 0px 6px #000000; "
>Conso. électrique</div> <!-- TEXTE TITRE -->


<!-- CONTENU -->
<div style="height:415px;  background-color: rgba(33,33,33,1); "> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>

</div>

</body>

Furaxworld · Mars 1, 2024, 11:05

dsigmoun:

@keyframes clipMe {
    0%, 100% {
      clip: rect(0px, 4400px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 440px, 0px);
    }
    50% {
      clip: rect(438px, 4400px, 650px, 0px);
    }
    75% {
      clip: rect(0px, 650px, 650px, 648px);
    }
  }

Pas étonnant avec 4400px pour width: 610px; height: 440px;
Ca fait 2X le tour …

dsigmoun · Mars 2, 2024, 6:28

effectivement… C’est déjà un peu mieux, mais tatonne pour bien comprendre leur valeur. A prior, cela correspond à , , ,

Animation


<style>
  .bb::before, .bb::after, .bb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .bb {
    width: 610px;
    height: 438px;
    margin: auto;
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  }
 
  .bb::before, .bb::after {
    content: "";
    z-index: 1;
    margin: -2px;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
  .bb::before {
    animation-delay: -4s;
  }

  @keyframes clipMe {
    0%, 100% {
      clip: rect(0px, 440px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 440px, 0px);
    }
    50% {
      clip: rect(438px, 440px, 650px, 0px);
    }
    75% {
      clip: rect(0px, 650px, 650px, 648px);
    }
  }
  html,
  body {
  }

  body {
    position: relative;
    background-color: #0f222b;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
</style>
<body>

<div class="bb"
style="
width : 520px;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0,1);">

<!-- BANDEAU -->
<div align=center style="color:rgba(0,0,0,1);
font-size:20px;
height:24px;
background-color: rgba(0, 0, 0,1);
padding-top:-1px;

background-color: rgba(0, 0, 0,1);
"
></div> <!-- BANDEAU -->     
                                                     
  
<!-- TEXTE TITRE -->
<div align=center style="color:rgba(255,255,255,1);
font-size:24px;
height:24px;
background-color: transparent! ;
margin-top:-30px;
font-family:Unica One; 
font-weight:normal;
text-shadow: 0px 0px 6px #000000; "
>Conso. électrique</div> <!-- TEXTE TITRE -->


<!-- CONTENU -->
<div style="height:420px;  background-color: rgba(33,33,33,1); "> <!-- Modifiez height pour régler la hauteur du cadre -->
</div>

</div>

</body>

Furaxworld · Mars 2, 2024, 7:36

Voici


<style>
  .bb::before, .bb::after, .bb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .bb {
    width: 610px;
    height: 440px;
    margin: auto;
    background: url("https://furaxworld.github.io/tuto/index/images/page-index/jeedom-logo.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
    color: #69ca62;
    box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  }
  .bb::before, .bb::after {
    content: "";
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
  }
    .bb::before {
    animation-delay: -4s;
  }
@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 680px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 500px, 0px);
  }
  50% {
    clip: rect(490px, 680px, 500px, 0px);
  }
  75% {
    clip: rect(0px, 680px, 500px, 670px);
  }
}

  html,
  body {
    height: 100%;
     position: relative;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
</style>
<body>
<div class="bb"></div>
</body>

anon53349806 · Mars 2, 2024, 7:44

Dans un design, ajouter un texte/html
demander les propriétés et coller le code dans la partie texte en bas

system · Mars 3, 2024, 7:45

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.