Harmonie Custom CSS — Animations & Effects

CSS Personnalisé Activé

Animations et effets hover appliqués au site:

• Rebond images + bordure jaune
• H1 avec shine vertical
• Articles avec scale + glow
• Bouton swing 10s cycle

/* Images du blog avec rebond + bordure jaune */
.blog-img img {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog-img img:hover {
  transform: scale(1.08);
  border: 2px solid #FFC300;
}

/* Logo avec rebond fluide, sans halo ni bordure */
#logo img {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#logo img:hover {
  transform: scale(1.08);
}

/* H1 multilignes : shine vertical + base jaune */
.titre-h1 {
  display: inline-block;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.20) 45%, rgba(255,255,255,0.20) 55%, rgba(255,255,255,0) 100%),
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 48%, rgba(255,255,255,0.95) 52%, rgba(255,255,255,0) 100%),
    linear-gradient(#FFC300, #FFC300);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 12% 100%, 4% 100%, 100% 100%;
  background-position: -20% 50%, -20% 50%, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-band-multi 8s ease-in-out infinite;
}

@keyframes shine-band-multi {
  0% { background-position: -20% 50%, -20% 50%, 0 0; }
  17% { background-position: 120% 50%, 120% 50%, 0 0; }
  100% { background-position: 120% 50%, 120% 50%, 0 0; }
}

/* Effet hover images blog */
.ast-blog-featured-section img,
.post-thumb img,
.entry-featured-image-url img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ast-blog-featured-section img:hover,
.post-thumb img:hover,
.entry-featured-image-url img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px #FFC300, 0 0 30px #FF6600;
  border: 2px solid #FFC300;
}

/* Articles du blog */
.ast-article-post {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid transparent;
}

.ast-article-post:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px #FFC300, 0 0 30px #FF6600;
  border: 1px solid #FFC300;
}

/* Bouton swing */
.btn-swing {
  display: inline-block;
  animation: swingAnim 10s infinite;
  transform-origin: top center;
}

@keyframes swingAnim {
  0%   { transform: rotate(0deg); }
  5%   { transform: rotate(15deg); }
  10%  { transform: rotate(-10deg); }
  15%  { transform: rotate(5deg); }
  20%  { transform: rotate(-5deg); }
  25%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}