Bagaimana untuk menambah kesan perubahan warna dinamik pada imej latar belakang dalam CSS3

Dalam artikel sebelumnya "Menggunakan CSS3 untuk mencipta imej latar belakang segi tiga yang keren", kami memperkenalkan anda kepada kaedah mencipta imej latar belakang segi tiga yang menarik Rakan-rakan yang berminat boleh menyemaknya

Artikel berikut akan memperkenalkan anda kepada kaedah mencipta imej latar belakang yang menarik, dan menunjukkan kepada anda cara menggunakan CSS3 untuk mencipta animasi imej latar belakang yang menukar warna untuk menjadikan halaman web anda lebih menarik!

Mari kita lihat rendering dahulu

Mari kita kaji bagaimana untuk mencapai kesan ini:

Pertama Kami tidak buat teg, tetapi tetapkan secara langsung imej latar belakang pada teg badan

body {
   background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Bagaimana untuk menukar warna imej? Ini memerlukan penambahan lapisan warna sebagai tindanan pada imej latar belakang Ini boleh dicapai menggunakan fungsi linear-gradient():

background-image: 
           linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
   url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");

Pada ini. kali ini Atau adakah ia kesan statik Bagaimana untuk mencapai kesan dinamik warna yang sentiasa berubah? Kita boleh menggunakan @keyframes dan atribut animasi untuk mencapai ini - tambahkan kesan animasi:

• Gunakan atribut animasi untuk menetapkan nama animasi, masa main balik, masa main balik, dll.:

  
  

body {
  background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

nama-animasi: Tentukan nama bingkai utama yang akan diikat pada pemilih

tempoh-animasi: Tentukan berapa saat atau milisaat animasi mengambil masa untuk menyelesaikan

fungsi pemasaan-animasi: Tetapkan cara animasi akan melengkapkan kitaran

tunda-animasi: Tetapkan selang kelewatan sebelum animasi bermula.

kiraan lelaran-animasi: Tentukan bilangan kali animasi dimainkan.

arah animasi: Menentukan sama ada animasi perlu dimainkan secara terbalik secara bergilir.

mod-isi-animasi: Menentukan gaya yang akan digunakan pada elemen apabila animasi tidak dimainkan (apabila animasi selesai, atau apabila terdapat kelewatan sebelum animasi mula dimainkan).

animation-play-state: Menentukan sama ada animasi sedang berjalan atau dijeda.

• Gunakan @keyframes untuk mentakrifkan setiap bingkai animasi:

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), 
		url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
		 url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
}

Kod lengkap diberikan di bawah:

Platform laman web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "

tutorial video css"!

Atas ialah kandungan terperinci Bagaimana untuk menambah kesan perubahan warna dinamik pada imej latar belakang dalam CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!