اموزش ساخت پیام هشدار دهنده در html (با انیمیشن)
- شنبه, ۴ خرداد ۱۳۹۸، ۱۲:۵۳ ق.ظ
سلام
کد ساخت هشدار در سایت ها کد فقط شامل Html و CSS میباشد
و جاوا اسکریپت در ان بکار رفته نشده است
نمونه این کد را میتوانید در صفحه اصلی این وبلاگ مشاهده کنید (کادر کوچک در گوشه سمت چپ رنگ قرمز)
این کد ویروس یا خراب کننده سایت یا وبلاگ شما نمیباشد
این کد را هرجا که وارد کنید قابل مشاهده است
کد : (این کد را باید در بخش ساختار قالب وارد کنید)
<style>
#alert-1{
background: #ff0000;
transition: all 0.5s;
width:250px;
height: 50px;
position: fixed;
transition: all 0.5;
top: 80%;
left:-300px;
animation: anim-4312-2 2s; animation: anim-4312 10s;
font-family: Tahoma;
color: #fff;
box-shadow: 0 0 30px #000000;
border-radius: 10px;
padding: 5px;
text-align: right;
}
@keyframes anim-4312
{
0% {
left:-300px;
}
10% {
left:-300px;
transition: all 0.5s; background: #f11;
}
12% {
transition: all 0.5s; background: #f44;
}
14% {
transition: all 0.5s; background: #8F0000;
}
16% {
transition: all 0.5s; background: #8F0000;
}
18% {
transition: all 0.5s; background: #f11;
}
20% {
transition: all 0.5s; background: #f44;
}
22% {
transition: all 0.5s; background: #8F0000;
}
24% {
transition: all 0.5s; background: #8F0000;
}
26% {
}
28% {
transition: all 0.5s; background: #8F0000;
}
30% {
transition: all 0.5s; background: #8F0000;
}
32% {
transition: all 0.5s; background: #f11;
}
34% {
transition: all 0.5s; background: #f44;
}
36% {
transition: all 0.5s; background: #8F0000;
}
38% {
transition: all 0.5s; background: #8F0000;
}
14% {
left:-5px;
}
96% {
left:-5px;
}
100% {
left:-300px;
}
}
@keyframes anim-4312-2
{
0%{
background: #f00;
}
100% {
background: #1253cc;
}
}
</style>
<div id="alert-1"> به وبلاگ من خوش اومدی . نظر درمورد مطالب فراموش نشه لطفا</div>
برای در خواست کد رایگان به اینجا مراجعه کنید
