Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik-tutorial css-php.cn

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

青灯夜游

Lepaskan： 2021-09-06 10:15:51

asal

4390 orang telah melayarinya

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:

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

Mari kita kaji cara mencapai kesan ini:

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

<h1>Hello World !</h1>

Salin selepas log masuk

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

dan kemudian mula tentukan gaya css untuk pengubahsuaian:

Warna latar belakang

body {
  background: black;
}

Salin selepas log masuk

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

Salin selepas log masuk

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

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;

Salin selepas log masuk

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

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

Salin selepas log masuk

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

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;

Salin selepas log masuk

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

  }
}

Salin selepas log masuk

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

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

Salin selepas log masuk

<. 🎜> Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

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

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

Salin selepas log masuk

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

Salin selepas log masuk

Gunakan css untuk mencipta kesan animasi ayunan teks yang menarik

Kod lengkap diberikan di bawah:



	
		
		
	

	
		<h1>Hello World !</h1>

Salin selepas log masuk

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!