เมื่อพูดถึง "สีค่อยเป็นค่อยไป" คุณคิดยังไง?
เมื่อฉันเริ่มค้นหาคำนามนี้ฉันพบว่าจริง ๆ แล้วมันมีความเข้าใจสองแบบหรือสองรูปแบบ: การไล่ระดับสีแบบไดนามิกและการไล่ระดับสีแบบคงที่
การไล่ระดับสีแบบไดนามิกที่เรียกว่าเพื่อยกตัวอย่างง่ายๆ: เมื่อเขามาถึงใบหน้าของเธอค่อยๆเปลี่ยนเป็นสีแดง ... ค่อยๆค่อยๆเปลี่ยนแปลงไปเรื่อย ๆ ในขณะที่การไล่ระดับสีแบบคงที่นั้นง่ายกว่า: เมื่อรุ้งมาจากท้องฟ้า, สีแดง, สีส้ม, เหลือง, สีเขียว, สีน้ำเงิน, สีน้ำเงิน, สีม่วง ... ในผลิตภัณฑ์สำเร็จรูปที่แสดงในปัจจุบันสีจากส่วนหนึ่งไปยังอีกส่วนหนึ่งและแอมพลิจูดอาจมีขนาดค่อนข้างเล็กและค่อยๆเปลี่ยนไป มันมีอยู่แล้วสร้างสถานะการเปลี่ยนแปลงและไม่สามารถเปลี่ยนแปลงได้อีก
ด้วยวิธีนี้ให้ใช้ JavaScript ก่อนเพื่อใช้การไล่ระดับสีแบบไดนามิกที่เรียกว่า หากคุณพิจารณาเหตุผลแบบไดนามิกคุณจะไม่ขึ้นรูป ให้ฉันแนะนำความคิดสั้น ๆ :
* การไล่ระดับสีแบบไดนามิก
การคัดลอกรหัสมีดังนี้:
<span style = "ตัวอักษรขนาด: 12px;"> <html>
-
<body>
<enter>
<div id = "fade"> </div>
</enter>
</body>
</html> </span>
เพื่อความสะดวกในการดูฉันกำลังเขียนสไตล์ฝังตัวหรือแนะนำโดยใช้สไตล์ลิงค์ภายนอก ต่อไปฉันจะเขียนแบบไดนามิกเพื่อให้ได้เอฟเฟกต์การไล่ระดับสี:
การคัดลอกรหัสมีดังนี้:
<span style = "ตัวอักษรขนาด: 12px;"> <script type = "text/javascript">
var node = document.getElementById ("จาง");
var color = "#0000";
ระดับ var = 1;
window.load = function fading () {
node.style.background = color.+level.toString ()+level.toString ();
ระดับ ++;
ถ้า (ระดับ> 16) {
ClearTimeout (ซีดจาง);
}อื่น{
settimeout (ซีดจาง 300);
-
-
<script> </span>
ดูเหมือนว่าฉันไม่จำเป็นต้องพูดมากขึ้นเพียงแค่การประกบและการโทรซ้ำ
* การไล่ระดับสีคงที่
ก่อนอื่นมาแนบรูปภาพมาดูเอฟเฟกต์และเข้าใจความหมายของพระเจ้า
โดยไม่คำนึงถึงความเข้ากันได้เอ่อมันเข้ากันได้หลังจากการวิจัยการดัดแปลงจริง นี่เป็นเพียงเล็กน้อยในอินเทอร์เฟซโดยไม่คำนึงถึงความเข้ากันได้ โอเคมาพูดต่อไปก่อน ฉันใช้เคอร์เนล WebKit ดังนั้นฉันจะใช้สิ่งนี้เพื่อแนะนำมันก่อน
เพิ่มในสไตล์ CSS:
ความเป็นมา: -webkit-Gradient (เชิงเส้น, 100% 0%, 0% 0%, จาก (#FFFFFF), การหยุดสี (0.5,#0000ff), ถึง (#FFFFFF));
คำอธิบายสั้น ๆ :
เชิงเส้น: สิ่งนี้พบแนวคิดทั้งสองของการไล่ระดับสีเชิงเส้นและการไล่ระดับสีรัศมีซึ่งไม่มีอะไรมากไปกว่าการเปลี่ยนแปลงเชิงเส้นในเส้นและการแพร่กระจายรัศมีรอบ ๆ เหมือนวงกลม;
ค่าสี่ค่าต่อไปนี้: ตามลำดับแสดงถึงค่า PX ในทิศทางที่สอดคล้องกันซึ่งสามารถจดจำได้ตามลำดับของการหมุนตามเข็มนาฬิกาจากด้านซ้าย แต่มันหมายถึงสีที่ถูกตัดออก
จาก: นี่คือสีของจุดเริ่มต้น
ถึง: และจากการปรากฏในเวลาเดียวกันและสีในตอนท้ายของการไล่ระดับสีก็เสร็จสมบูรณ์ในที่สุด
Color-stop: หมายถึงสีที่จะปรากฏขึ้นเมื่อมันเปลี่ยนไปที่เส้นคือ แน่นอนว่ามันเปลี่ยนจากพื้นที่โดยรอบซึ่งเทียบเท่ากับจากจุดเปลี่ยนจากจุดเปลี่ยนไปเป็น;
โอเคฉันจะเข้าใจมากและฉันจะได้รับรหัสพื้นฐานอื่น ๆ ง่ายๆ
การคัดลอกรหัสมีดังนี้:
ตัวกรอง: progid: dximagetransform.microsoft.gradient (gradientType = 1, startColorstr =#b8c4cb, endcolorstr =#f6f6f8);/*ie6*//
ความเป็นมา: -moz-Linear-Gradient (ซ้าย,#ffffff,#FF0000);/*อื่น ๆ ไม่ใช่ IE6*/
ความเป็นมา: -webkit-Gradient (เชิงเส้น, 100% 0%, 0% 0%, จาก (#FF0000), ถึง (#0000ff));/*อื่น ๆ ไม่ใช่ IE6*//
ฉันดูตอนของ "การพูด" วันนี้ ปรากฎว่ามีการแสดงที่ดีเช่นนี้ ต่ำเกินไปหรือไม่?