گروه کامپیوتر دانشگاه آزاد

اساتید و دانشجویان دانشگاه آزاد اسلامی

گروه کامپیوتر دانشگاه آزاد

اساتید و دانشجویان دانشگاه آزاد اسلامی

لوگو گروه کامپیوتر دانشگاه آزاد

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِیمِ
زکات علم، نشر آن است. گروه کامپیوتر دانشگاه آزاد با هدف خدمت به دانش آموزان ، دانشجویان و آنهایی که علاقه به برنامه نویسی و طراحی و کلیه امور تخصصی کامپیوتر دارند با هدف نشر علم خدمت رسانی کند امید است کاربران در جهت تحقق این اهداف والا یار و همدم ما باشند . . .

اعتبار سنجی سایت
logo-samandehi
آرشیو سایت
ترم بندی کامپیوتر

تغییر در آرشیو سایت و دسته بندی مطالب

نمایش داده می شوید!
اخطار جدی به کپی برداران از سایت
پلیس سایبری
طبق ماده (12) قانون جرايم رايانه اي: هرکس به طور غیرمجاز داده ای متعلق به دیگری را برباید، چنانچه عین داده‌ ها در اختیار صاحب آن باشد، به جزای نقدی از یک تا بیست میلیون ریال و در غیر این صورت به حبس از نود و یک روز تا یک سال یا جزای نقدی از پنج تا بیست میلیون ریال یا هر دو مجازات محکوم خواهد شد.
آخرین نظرات
گالری تبلیغات
  • 01
    شهر تبریز ، پایتخت گردشگری جهان اسلام 2018
  • نمایندگی فروش یلدیز اینتگره
    نمایندگی فروش یلدیز اینتگره
  • 01
    سال اقتصاد مقاومتی ، تولید ، اشتغال

متحرک سازی با سی اس اس

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

فرمت gif یکی از فرمت های رایج تصویری در وب است که بیشترین استفاده آن زمانی است که بخواهیم یک تصویر متحرک یا به صورت انیمیشن را نمایش دهیم. اما این فرمت برخلاف رایج بودن آن اصلا فرمت خوبی نیست و دارای حجم های بالایی نیز است و همچنین از تعداد رنگ پایینی پشتیبانی میکند. برای مثال Matt در این سایت یک عکس با فرمت gif را گذاشته است که دارای 1.7MB حجم است، در حالی که همان عکس با فرمت ویدیویی WebM دارای فقط 94KB است.

در این مطلب ما قصد داریم ببینیم که چگونه میتوان با استفاده از animation در CSS3 یک تصویر متحرک بسازیم.

برای مثال در عکس زیر ما میخواهیم پره های دو توربین بادی همواره در حال چرخش باشند

(برای نمایش در اندازه اصلی روی عکس کلیک کنید)

برای اینکار ابتدا باید پره های دو توربین بادی را جدا کرده و در یک عکس جداگانه دیگر ذخیره کنیم. که اینکار را به دست حرفه ای های فتوشاپ میسپاریم و سپس در عکس اصلی دیگر نباید نشانی از پره های توربین باشد. یعنی به شکل زیر

(برای نمایش در اندازه اصلی روی عکس کلیک کنید)

و پره های دو توربین به این شکل پره ی اول و پره ی دوم  باشند.

حالا که همه چیز در اختیار ما قرار دارد تنها کاری که باید انجام دهیم این است که با استفاده از CSS پره ها را در محل مناسب خود قرار دهیم و با استفاده از animation در CSS3 آن ها را به صورت مداوم بچرخانیم.

برای اینکار کد HTML زیر را به صفحه اضافه میکنیم.

کدهای CSS زیر را نیز اضافه میکنیم. کد background-size:cover باعث میشود بکگراند کل عنصر را پوشش بگیرد و همینطور کد background-size:contain باعث میشود تصویر بزرگتر از عنصر نباشد.

.image-wrap {
  position:relative;
  overflow:hidden;
}
.image-wrap .windmill-background {
  background:url(wind-bg.png) no-repeat;
  background-size:cover;
}
.image-wrap .mill1 {
  background:url(mill1.png) no-repeat;
  background-size:contain;
  position:absolute;
}
.image-wrap .mill2 {
  background:url(mill2.png) no-repeat;
  background-size:contain;
  position:absolute;
}

همانطور که میبینید ما پوزیشن پره ها را برابر absolute قرار دادیم. بنابراین با استفاده از مشخصه های top و left میتوانیم محل دقیق آنها بر روی عکس را مشخص کنیم. بعد از انجام اینکار کدهای انیمیشن زیر را نیز اضافه میکنیم. کد transform-origin مشخص میکند که rotate روی چه نقطه ای انجام شود. برای مثال اگر عرض و طول تصویر پره های ما یکسان بود باید این مشخصه را برابر center در نظر میگرفتیم.

.image-wrap .mill1, .image-wrap .mill2 {
  animation:spin 90s infinite linear;
  transform-origin:127px 89px;
}
@keyframes spin {
  0% {transform: rotateZ(0deg)}
  100% {transform: rotateZ(360deg)}
} 


نظرات (۰)

هیچ نظری هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی