Rumah > hujung hadapan web > tutorial css > Bagaimana untuk mencapai kesan perubahan warna elemen dari kiri ke kanan dalam css3

Bagaimana untuk mencapai kesan perubahan warna elemen dari kiri ke kanan dalam css3

WBOY
Lepaskan: 2021-11-26 11:49:30
asal
3442 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut latar belakang dan fungsi "linear-gradient()" untuk mencapai kesan perubahan warna elemen dari kiri ke kanan Anda hanya perlu menambah "background:linear-gradient(. ke kanan, putih) ke elemen ,biru)" sudah memadai.

Bagaimana untuk mencapai kesan perubahan warna elemen dari kiri ke kanan dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk mencapai kesan menukar warna elemen dari kiri ke kanan dalam css3

Anda boleh menggunakan atribut latar belakang dan kecerunan linear () fungsi dalam css Untuk merealisasikan perubahan warna dari kiri ke kanan, atribut

latar belakang digunakan untuk menetapkan gaya latar belakang elemen Fungsi linear-gradient() digunakan untuk menetapkan kecerunan linear unsur dan digunakan untuk mencipta perwakilan dua Atau gambar kecerunan linear berbilang warna.

Untuk mencipta kecerunan linear, anda perlu menentukan dua warna Anda juga boleh mencapai kesan kecerunan dalam arah yang berbeza (dinyatakan sebagai sudut Jika arah tidak ditentukan, kecerunan akan dari atas ke bawah). secara lalai.

Mari kita lihat melalui contoh:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
#grad1 {
    height: 200px;  
    background: linear-gradient(to right, white , blue);
}
</style>
</head>
<body>
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是白色,慢慢过渡到蓝色:</p>
<div id="grad1"></div>
</body>
</html>
Salin selepas log masuk

Hasil output:

Bagaimana untuk mencapai kesan perubahan warna elemen dari kiri ke kanan dalam css3

(Belajar perkongsian video : tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan perubahan warna elemen dari kiri ke kanan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan