آموزش CSS3 (جلسه دوم)
در جلسه قبل ساخت يک انيميشن توسط CSS3 را ياد گرفتيم حال در اين جلسه مي خواهيم انيميشن خود را کنترل کنيم.
animation-play-state
ويژگي بالا اين امکان را به ما دهد که انيميشن خود را متوقف يا اجرا کنيم.
animation-play-state: paused|running;
اگر مقدار دستور بالا را برابر با paused قرار دهيم انيميشن خود را متوقف کرده و اگر مقدار آن را running قرار دهيم انيمشن ما اجرا مي شود.
يک صفحه درست کردم که بهتر مفهوم و کارايي animation و animation-play-state را متوجه بشويد.
يک مثال ديگر براي يادگيري بهتر:
خوب مي خواهيم يک انيميشن ايجاد کنيم که وقتي که نشانه گر موس را روي تصوير مورد نظر برده تصوير چند دور بچرخد و رنگ پس زمينه و رنگ متن تغيير کند.
01 div{
02 -moz-transition: all 1s ease-in-out 0s;
03 -webkit-transition: all 1s ease-in-out 0s;
04 position:relative;
05 background:red;
06 width:100px;
07 height:70px;
08 margin:200px auto;
09 text-align:center;
11 font-family:Tahoma;
11 text-align:center;
12 padding-top:30px;
13 }
14 div:hover {
15 background-color: #03F;
16 color: #fff;
17 transform: rotate(360deg) scale(1.5);
18 -moz-transform: rotate(360deg) scale(1.5);
19 -webkit-transform: rotate(360deg) scale(1.5);
20 }
02 -moz-transition: all 1s ease-in-out 0s;
03 -webkit-transition: all 1s ease-in-out 0s;
04 position:relative;
05 background:red;
06 width:100px;
07 height:70px;
08 margin:200px auto;
09 text-align:center;
11 font-family:Tahoma;
11 text-align:center;
12 padding-top:30px;
13 }
14 div:hover {
15 background-color: #03F;
16 color: #fff;
17 transform: rotate(360deg) scale(1.5);
18 -moz-transform: rotate(360deg) scale(1.5);
19 -webkit-transform: rotate(360deg) scale(1.5);
20 }
دیدگاه خود را وارد کنید
علی جان ادامه بده من یکی که دارم استفاده میکنم و لذت میبرم
سلام ! آموزشتون حرف نداره ، اما یه درخواست دارم ! اینکه از آموزشهاتون نسخه های pdf برای دانلود هم قرار بدین . در ضمن اینو به بقیه ی دوستانتون که در سایت مطلب آموزشی میزارن هم منعکس کنین! بازم ممنون .
سلام دوست عزیز ممنون.وقتی کل دروره آموزشی به اتمام رسید از کل جلسه ها PDF تهیه می شود.
ایا میشه به جای یک مربع قرمز یک عکس قرار داد؟
ممنون میشم جواب بدین.
بله میشه شما میتونین در باکس قرارش بدین یا اینکه بصورت پس زمینه تعریفش کنین
با تشکر از آموزش تون
اگر ممکنه در زمینه استاندارد های وب در css3 آموزش بذارید
ممنون