شريط معلومات يدوي HTML- CSS فقط

 بعيداً عن شرائط الأخبار وآخر المواضيع التلقائية التي تعرض عناوين وروابط مواضيع , نقدم لكم شئ خفيف وبسيط شريط معلوماتي لا يعتمد على أى اكواد ضخمة 

ولا اى مكتبات جافا سكريبت فقط كود HTML / CSS

خفيف يمكنك استخدامه في المواضيع أو الإضافات أو الصفحات

لا يوجد وظيفة محددة لهذا الشريط سوى انه يقوم بعرض 4 أسطر بشكل جمالي متحرك , يمكن استخدامه في التنبيه عن شئ مهم لديك

يمكن استخدامه لمجرد لفت الأنظار للكتابة 

في النهاية هو لا يشكل اى عبئ على التصفح أو على المكان الذي تضيفه به لان الكود الخاص به خفيف جداً

<style>

@keyframes ticker {0%   {margin-top: 0}25%  {margin-top: -30px}50%  {margin-top: -60px} 75%  {margin-top: -90px}100% {margin-top: 0}}

.CnmuTick{display:block;overflow:hidden;box-sizing:border-box;height:38px;border-radius:4px;line-height:30px;color:#fff;border-width:4px;border-style:solid;}

.CnmuTick span{float:right;padding:0 8px;background-color:rgba(0,0,0,.2);width:100px;text-align:center;overflow:hidden;border-radius:4px;box-sizing:border-box;font-size:16px;margin:0 0 0 -100px}

.CnmuTick ul{margin:0 auto 20px;float:right;overflow:hidden;padding:0 110px 0 0;box-sizing:border-box;animation:ticker 12s cubic-bezier(1,0,.5,0) infinite;list-style:none}

.CnmuTick ul:hover{animation-play-state:paused}

.CnmuTick:hover ul{animation-play-state:paused}

.CnmuTick ul li{list-style:none;margin:0;padding:0;line-height:30px;clear:both;float:right;gap:0;}

.CnmuTick ul li::before, .CnmuTick ul li::after{display:none;}

.CnmuTick ul li a{color:#fff;text-decoration:none}

.CnmuTick ul li a:hover {color:#000;}

.Tick1{background-color:#0092f9;border-color:#0092f9;}

.Tick2{background-color:#3c9f83;border-color:#3c9f83;}

.Tick3{background-color:#9f3c65;border-color:#9f3c65;}

.Tick4{background-color:#db0000;border-color:#db0000;}

</style>

<div class="CnmuTick Tick1">

<span>معلومات</span>

<ul>

<li>عدل النص</li>

<li>عدل النص</li>

<li>عدل النص</li>

<li>عدل النص</li>

</ul>

</div>

كل ما تحتاجه هو وضع الكود في اى مكان يعجبك في الموضوع او إضافة معينة 

ويمكنك تكرار الشريط بتكرار الكود المعلم بالأصفر مع تغيير الرقم 1 فيه بأى رقم حتى 4 للحصول على لون جديد

معاينة

التجاوب