مطالب عمومی

آموزش انیمیشن چشمک زن با CSS3

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

2294 نفر
2 دقیقه
بروزرسانی در: آبان 4, 1400

فهرست مطالب

برای ایجاد حالت چشمک زن برای عناصر html در وب، نیاز به استفاده از jquery نیست. شما میتوانید با استفاده از دستوارت css3 به راحتی یک عنصر چشمک زن از قبیل متن، عکس و … طراحی کنید. برای کدنویسی از دستورات keyframes و animation استفاده میکنیم. مشاهده دمو

کدهای html را بصورت زیر مینویسیم :

[free_vip]

[html]
<img src=”images/logo.jpg” alt=”Don’t Blink”>
<h1>عنوان بصورت چشمک زن</h1></pre>
[/html]

کدهای css بصورت زیر نوشته میشوند :

[css]
@-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} /* Firefox */
@-webkit-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} /* Webkit */
@-ms-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} /* IE */
@keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
} /* Opera and prob css3 final iteration */
img {
display:block;
margin:10px auto;
border:1px solid #aaa;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 2s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
h1 {
text-align:center;
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
/* order: name, direction, duration, iteration-count, timing-function */
-moz-animation:blink normal 4s infinite ease-in-out; /* Firefox */
-webkit-animation:blink normal 4s infinite ease-in-out; /* Webkit */
-ms-animation:blink normal 4s infinite ease-in-out; /* IE */
animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
[/css]

شما میتوانید فایل کامل این آموزش را از لینک زیر دانلود کنید :

[/free_vip]

4.2/5 - (5 امتیاز)
1 دیدگاه
انتشار: آبان 24, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
  • سلام دوست عزیز
    قطعه کدی میخوام که بتونم عکس ها رو پشت سر هم عوض کنم

آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا