Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

Dalam artikel sebelumnya "Sangat praktikal! Dalam "Menggunakan CSS3 untuk menindih dan memaparkan dua imej bersama ", kami berkongsi dua kesan khas yang menggunakan CSS3 untuk menindih dan memaparkan dua imej bersama-sama. Kali ini kami akan memperkenalkan kepada anda cara menggunakan CSS untuk mencipta kesan animasi ayunan teks Jika anda berminat, anda boleh mempelajarinya~

Teks ialah komponen yang paling biasa dalam halaman web boleh membuat laman web lebih menarik Hari ini saya akan berkongsi dengan anda kesan animasi ayunan teks tajuk CSS.

Mari kita lihat pemaparan dahulu:

Mari kita kaji cara mencapai kesan ini:

Mula-mula buat Bahagian HTML, takrifkan tajuk h1 yang mengandungi teks

<h1>Hello World !</h1>

dan kemudian mula tentukan gaya css untuk pengubahsuaian:

Warna latar belakang

body {
  background: black;
}

gaya teks tajuk h1, gunakan atribut lejang teks untuk menambah lejang putih

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

teks tajuk h1 gaya, gunakan atribut siri latar belakang dan linear-gradient() untuk menambah latar belakang teks

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;

gaya teks tajuk h1, gunakan atribut penapis untuk menambah bayang sempadan

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);

Kemudian tambahkan kesan animasi untuk membuat teks berayun dan latar belakang teks turut bergerak (untuk mencapai kesan anjakan):

Ikat animasi animasi pada teg h1, tetapkan dua animasi bg-shifth dan swing: animasi bg-shifth mengawal latar belakang teks, animasi swing mengawal ayunan teks

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

Gunakan dua peraturan @keyframes, berikan Hanya tetapkan tindakan untuk setiap bingkai kedua-dua animasi.

@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);

  }
}

Akhir sekali, kesan akhir mempunyai kesan sorotan apabila berayun Mari kita laksanakannya:

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

<.>

Tambahkan kesan animasi bg-shift2 padanya dan biarkan ia menukar kedudukan semasa teks berayun:

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

Gunakan peraturan @keyframes untuk menetapkan tindakan bagi setiap bingkai animasi Itu sahaja.

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

  50% {

	background-position: 0 -50px;

  }

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

Kod lengkap diberikan di bawah:

	
		
		
	
	
		<h1>Hello World !</h1>
	

Platform laman web PHP Cina mempunyai banyak sumber pengajaran video, semua orang dialu-alukan untuk mempelajari "

tutorial video css》!

Atas ialah kandungan terperinci Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!