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

برای ایجاد حالت چشمک زن برای عناصر 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]

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

[onliner_button type=”edu-demo” url=’https://onliner.ir/demo-education/css/blink/blink-onliner.ir.zip’]دانلود دمو[/onliner_button]

[/free_vip]

دیدگاه خود را برای ما ارسال کنید

No Comments