آموزش CSS3 (جلسه دوم)
(بدون نظر)
Loading...
در جلسه قبل ساخت یک انیمیشن توسط CSS3 را یاد گرفتیم حال در این جلسه می خواهیم انیمیشن خود را کنترل کنیم.
animation-play-state
ویژگی بالا این امکان را به ما دهد که انیمیشن خود را متوقف یا اجرا کنیم.
animation-play-state: paused|running;
اگر مقدار دستور بالا را برابر با paused قرار دهیم انیمیشن خود را متوقف کرده و اگر مقدار آن را running قرار دهیم انیمشن ما اجرا می شود.
یک صفحه درست کردم که بهتر مفهوم و کارایی animation و animation-play-state را متوجه بشوید.
یک مثال دیگر برای یادگیری بهتر:
خوب می خواهیم یک انیمیشن ایجاد کنیم که وقتی که نشانه گر موس را روی تصویر مورد نظر برده تصویر چند دور بچرخد و رنگ پس زمینه و رنگ متن تغییر کند.
۰۱ div{
۰۲ -moz-transition: all 1s ease-in-out 0s;
۰۳ -webkit-transition: all 1s ease-in-out 0s;
۰۴ position:relative;
۰۵ background:red;
۰۶ width:100px;
۰۷ height:70px;
۰۸ margin:200px auto;
۰۹ text-align:center;
۱۱ font-family:Tahoma;
۱۱ text-align:center;
۱۲ padding-top:30px;
۱۳ }
۱۴ div:hover {
۱۵ background-color: #03F;
۱۶ color: #fff;
۱۷ transform: rotate(360deg) scale(1.5);
۱۸ -moz-transform: rotate(360deg) scale(1.5);
۱۹ -webkit-transform: rotate(360deg) scale(1.5);
۲۰ }
۰۲ -moz-transition: all 1s ease-in-out 0s;
۰۳ -webkit-transition: all 1s ease-in-out 0s;
۰۴ position:relative;
۰۵ background:red;
۰۶ width:100px;
۰۷ height:70px;
۰۸ margin:200px auto;
۰۹ text-align:center;
۱۱ font-family:Tahoma;
۱۱ text-align:center;
۱۲ padding-top:30px;
۱۳ }
۱۴ div:hover {
۱۵ background-color: #03F;
۱۶ color: #fff;
۱۷ transform: rotate(360deg) scale(1.5);
۱۸ -moz-transform: rotate(360deg) scale(1.5);
۱۹ -webkit-transform: rotate(360deg) scale(1.5);
۲۰ }
تبلیغات
علی جان ادامه بده من یکی که دارم استفاده میکنم و لذت میبرم
سلام ! آموزشتون حرف نداره ، اما یه درخواست دارم ! اینکه از آموزشهاتون نسخه های pdf برای دانلود هم قرار بدین . در ضمن اینو به بقیه ی دوستانتون که در سایت مطلب آموزشی میزارن هم منعکس کنین! بازم ممنون .
سلام دوست عزیز ممنون.وقتی کل دروره آموزشی به اتمام رسید از کل جلسه ها PDF تهیه می شود.
ایا میشه به جای یک مربع قرمز یک عکس قرار داد؟
ممنون میشم جواب بدین.
بله میشه شما میتونین در باکس قرارش بدین یا اینکه بصورت پس زمینه تعریفش کنین
با تشکر از آموزش تون
اگر ممکنه در زمینه استاندارد های وب در css3 آموزش بذارید
ممنون