متفاوت ترین مجله اینترنتی ...

آموزش CSS3 (جلسه دوم)

12345 (بدون نظر)
Loading...
44

در جلسه قبل ساخت یک انیمیشن توسط 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);
۲۰ }

پیش نمایش مثال

ممکن است به این مطالب نیز علاقمند باشید
7 دیدگاه
  1. محمد نصیری می‌گوید

    علی جان ادامه بده من یکی که دارم استفاده میکنم و لذت میبرم

  2. emperor می‌گوید

    سلام ! آموزشتون حرف نداره ، اما یه درخواست دارم ! اینکه از آموزشهاتون نسخه های pdf برای دانلود هم قرار بدین . در ضمن اینو به بقیه ی دوستانتون که در سایت مطلب آموزشی میزارن هم منعکس کنین! بازم ممنون .

    1. علی پامناري می‌گوید

      سلام دوست عزیز ممنون.وقتی کل دروره آموزشی به اتمام رسید از کل جلسه ها PDF تهیه می شود.

  3. amir8 می‌گوید

    ایا میشه به جای یک مربع قرمز یک عکس قرار داد؟
    ممنون میشم جواب بدین.

    1. ali می‌گوید

      بله میشه شما میتونین در باکس قرارش بدین یا اینکه بصورت پس زمینه تعریفش کنین

  4. ali می‌گوید

    با تشکر از آموزش تون
    اگر ممکنه در زمینه استاندارد های وب در css3 آموزش بذارید

  5. آفاق وب می‌گوید

    ممنون

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.

در جلسه قبل ساخت یک انیمیشن توسط CSS3  را یاد گرفتیم حال در این جلسه می خواهیم انیمیشن خود را کنترل کنیم.   animation-play-state تبلیغات […]