Utilisez CSS pour créer des effets d'animation de swing de texte intéressants

Dans l'article précédent "Super pratique !" Dans "Utiliser CSS3 pour superposer et afficher deux images ensemble ", nous avons partagé deux effets spéciaux qui utilisent CSS3 pour superposer et afficher deux images ensemble. Cette fois, nous allons vous présenter comment utiliser CSS pour créer des effets d'animation de texte. Si vous êtes intéressé, vous pouvez en apprendre davantage ~

Le texte est le composant le plus courant des pages Web. L'ajout d'effets d'animation au texte peut créer du Web. page plus attrayante. , aujourd'hui je vais partager avec vous un effet spécial d'animation de swing de texte de titre CSS, venez jeter un oeil.

Regardons d'abord les rendus :

Étudions comment obtenir cet effet :

Créez d'abord la partie HTML, définissez un titre h1 contenant du texte

<h1>Hello World !</h1>

Puis commencez à définir styles CSS à modifier :

Couleur d'arrière-plan

body {
  background: black;
}

style de texte de titre h1, utilisez l'attribut texte-trait pour ajouter un trait blanc

h1 {
text-align: center;
margin: 200px auto;
font-size: 4.5rem;
font-family: arial;
font-weight: 900;
color: transparent;
overflow: hidden;
-webkit-text-stroke: 4px white; 
}

style de texte de titre h1, utilisez l'attribut de série d'arrière-plan et un dégradé linéaire () ajoute un arrière-plan de texte

background: linear-gradient(45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(-45deg, black 30%, transparent 30%, transparent 70%, black 70%), linear-gradient(90deg, crimson 30%, transparent 30%, transparent 70%, crimson 70%)red;
background-size: 20px 20px, 20px 20px, 1px 1px;
background-position: 0 0, 0 0, 0 0;
-webkit-background-clip: text;

h1 style de texte de titre, utilise l'attribut de filtre pour ajouter une ombre de bordure

filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 2px crimson);

Puis ajoutez des effets d'animation pour faire osciller le texte et l'arrière-plan du texte bouge également (implémentation de l'effet Shift ) :

Liez l'animation à la balise h1, définissez deux animations bg-shifth et swing : l'animation bg-shifth contrôle l'arrière-plan du texte, l'animation swing contrôle le swing du texte

animation: bg-shift 1s ease-in-out infinite alternate-reverse, swing 2s ease-in-out infinite;

Utilisez deux règles @keyframes, donnez Il suffit de définir l'action pour chacune cadre des deux animations.

@keyframes bg-shift {
  from {
	background-position: 0 50px;
  }
}

@keyframes swing {
  0% {
	transform-origin: top;
	transform: perspective(550px)rotatex(55deg);
  }

  50% {
	transform: perspective(550px)rotatex(-55deg);
  }

  100% {
	transform-origin: top;
	transform: perspective(550px)rotatex(55deg);

  }
}

Enfin, l'effet final a un effet de surbrillance lorsqu'il oscille. Implémentons-le :

h1::before {
  content: "Hello World !";
  position: absolute;
  background: linear-gradient(transparent 30%, white, transparent 70%);
  -webkit-background-clip: text;
  -webkit-text-stroke: 2px red;
}

Ajoutez-y un effet d'animation bg-shift2, afin qu'il change de position à mesure que le texte oscille. :

animation: bg-shift2 2s ease-in-out infinite alternate-reverse;

Utilisez la règle @keyframes pour définir l'action pour chaque image de l'animation.

@keyframes bg-shift2 {
  0% {
	background-position: 0 50px;
  }

  50% {

	background-position: 0 -50px;

  }

  100% {
	background-position: 0 50px;
  }
}

Le code complet est donné ci-dessous :

	
		
		
	

	
		<h1>Hello World !</h1>
	

La plateforme de sites Web PHP chinois propose de nombreuses ressources pédagogiques vidéo. Tout le monde est invité à apprendre le "Tutoriel vidéo CSS" !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!