التنبيهات مهمة جدا فبعض الاحيان قد ترغب بأيصال تنبيه أو ربما اعلان أو اي ترويج اخر الى زوار موقعك وهناك العديد من الاضافات التي تمكنك بعمل هذي الوظيفية واضافتنا اليوم بنفس الوظيفة التي نتحدث عنها
طريقة التركيب
اولا اضافة كود Css
.tn-box {
width: 360px;
color: #fff;
font-family: "Segoe UI", sans-serif;
font-weight: 500;
font-size: 16px;
position: fixed;
bottom: 40px;
left: 20px;
padding: 15px;
text-align: right;
border-radius: 3px;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
cursor: default;
display: none;
transform: translateY(30px)
}
.tn-box-color-1{
background-image: linear-gradient( 120deg, rgb(215,215,215) 0%, rgb(215,215,215) 0%, rgb(25,118,210) 0%, rgb(66,165,245) 100%);
}
.tn-progress {
width: 0;
height: 4px;
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 5px;
right: 2%;
border-radius: 3px;
}
input.fire-check:checked ~ section .tn-box {
display: block;
animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}
.tn-box.tn-box-active {
display: block;
animation: fadeOut 5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}
@keyframes fadeOut {
0% { opacity: 0; }
10% { opacity: 1; transform: translateY(0px);}
90% { opacity: 1; transform: translateY(0px);}
99% { opacity: 0; transform: translateY(30px);}
100% { opacity: 0; }
}
@keyframes runProgress {
0% { width: 0%; background: rgba(255,255,255,0.3); }
100% { width: 96%; background: rgba(255,255,255,1); }
}
بعدها نقوم بأضافة كود هتمل
<label for="checkbox">ان كنت متابع اضغط هنا</label>
<input type="checkbox" class="fire-check" id="checkbox">
<section>
<div class="tn-box tn-box-color-1">
<p>لقد نجحت في ضبظ الإعدادات</p>
<div class="tn-progress"></div>
</div>
</section>
