عندما يتعلق الأمر بـ "اللون التدريجي" ، ما رأيك؟
عندما بدأت في البحث عن هذا الاسم ، وجدت أن لديها بالفعل فهمين أو شكلين: التدرج الديناميكي والتدرج الثابت.
ما يسمى التدرج الديناميكي ، لإعطاء مثال بسيط: عندما يأتي ، يتحول وجهها تدريجياً إلى اللون الأحمر ... تدريجياً ، تتغير التغييرات تدريجياً باستمرار ؛ على الرغم من أن التدرج الثابت أبسط: عندما يأتي قوس قزح من السماء ، والأحمر ، والبرتقالي ، والأصفر ، والأخضر ، والأزرق ، والأرجواني ... في المنتجات النهائية المعروضة حاليًا ، تختلف الألوان من جزء إلى آخر ، وقد تكون السعة صغيرة نسبيًا ، وتتغير تدريجياً ، ولكن هناك شيء حاسم. لقد كانت موجودة بالفعل ، وتشكيل حالة تغيير ولا يمكن تغييرها بعد الآن.
وبهذه الطريقة ، دعنا نستخدم أولاً JavaScript لتنفيذ ما يسمى التدرج الديناميكي. إذا كنت تفكر في الأسباب الديناميكية ، فلن تصعد الصورة. اسمحوا لي أن أقدم الفكرة باختصار:
* التدرج الديناميكي
نسخة الكود كما يلي:
<span style = "font-size: 12px ؛"> <html>
...
<body>
<centre>
<div id = "fade"> </viv>
</center>
</body>
</html> </span>
من أجل راحة المشاهدة ، أكتب نمطًا مضمنًا ، أو أوصي باستخدام أنماط الارتباطات الخارجية. بعد ذلك ، سأكتب ببساطة ديناميكيًا لتحقيق تأثير التدرج:
نسخة الكود كما يلي:
<span style = "font-size: 12px ؛"> <script type = "text/javaScript">
var node = document.getElementById ("fade") ؛
var color = "#0000" ؛
مستوى var = 1 ؛
window.load = function fading () {
node.style.background = color.+level.toString ()+level.toString () ؛
المستوى ++ ؛
إذا (المستوى> 16) {
ClearTimeout (تلاشي) ؛
}آخر{
setTimeout (Pading ، 300) ؛
}
}
<script> </span>
يبدو أنني لست بحاجة إلى قول المزيد ، مجرد الربط ومكالمة متكررة.
* تدرج ثابت
دعونا أولاً نرفق الصور ، دعنا نلقي نظرة على التأثير ونفهم عمومًا معنى الآلهة.
دون النظر في التوافق ، UM ، فهو متوافق بعد أبحاث التعديل الحقيقي. هذا يفتقر قليلاً إلى الواجهة دون النظر في التوافق. حسنًا ، دعنا نستمر في قول هذا أولاً. أنا أستخدم kernel webkit ، لذلك سأستخدم هذا لتقديمه أولاً.
أضف نمط CSS:
الخلفية: -webkit-radient (خطي ، 100 ٪ 0 ٪ ، 0 ٪ 0 ٪ ، من (#ffffff) ، توقف اللون (0.5 ،#0000FF) ، إلى (#ffffff)) ؛
شرح موجز:
الخطي: يواجه هذا مفهومي التدرج الخطي والتدرج الشعاعي ، والتي ليست أكثر من التغييرات الخطية على خط ونشر شعاعي مثل دائرة ؛
القيم الأربع التالية: تمثل على التوالي قيمة PX في الاتجاه المقابل ، والتي يمكن حفظها بترتيب الدوران في اتجاه عقارب الساعة من اليسار ، ولكنه يمثل ، اللون المقطوع.
من: هذا هو لون البداية
إلى: ومن يظهر في نفس الوقت ، ويتم إكمال اللون في نهاية التدرج أخيرًا
توقف اللون: يشير إلى اللون الذي سيظهر عندما يتغير إلى مكان وجود الخط. بالطبع ، ينتقل من المنطقة المحيطة ، والتي تعادل من ، إلى النقطة الانتقالية ، من نقطة الانتقال ، إلى ؛
حسنًا ، سأفهم كثيرًا ، وسأحصل على بعض الرموز الأساسية الأخرى البسيطة
نسخة الكود كما يلي:
Filter: progid: dximagetransform.microsoft.gradient (gradientType = 1 ، startColorStr =#b8c4cb ، endcolorstr =#f6f6f8) ؛/*ie6*/
الخلفية: -moz-liner-radient (يسار ،#ffffff ،#ff0000) ؛/*الآخرين لا ie6*/
الخلفية: -webkit-regient (خطي ، 100 ٪ 0 ٪ ، 0 ٪ 0 ٪ ، من (#ff0000) ، إلى (#0000FF)) ؛/*الآخرين لا IE6*/
شاهدت حلقة من "التحدث" اليوم. اتضح أن هناك مثل هذا العرض الجيد. هل هو أقل جدا؟