جلوه های شناور css. جلوه های شناور اصلی برای تصاویر در CSS3 خالص. تغییر رنگ در شناور

CSS3 امکانات بی‌شماری را به طراحان UX (تجربه) داده است و بهترین چیز در مورد آن این است که جالب‌ترین عناصر واقعاً آسان برای پیاده‌سازی هستند.

فقط چند خط کد افکت های انتقال شگفت انگیزی ایجاد می کند که کاربران شما را هیجان زده می کند، تعامل را افزایش می دهد و در نهایت استفاده صحیحترافیک شما را افزایش خواهد داد. علاوه بر این، این جلوه‌ها از شتاب سخت‌افزاری استفاده می‌کنند، که پیشرفت است - که می‌توانید همین الان در آن شرکت کنید.

در اینجا 8 افکت بسیار ساده وجود دارد که به رابط کاربری شما جان می بخشد ( رابط کاربری) و لبخند بر چهره کاربران شما می نشیند.

تمام این افکت ها (یک مستطیل) توسط ویژگی انتقال کنترل می شوند. بنابراین برای اینکه ببینیم این افکت‌ها چگونه کار می‌کنند، یک div در صفحه HTML ایجاد کرده‌ایم:

پس از اتمام، عرض و ارتفاع آن (بنابراین دارای ابعاد)، رنگ پس زمینه آن (تا بتوانیم آن را ببینیم) و خواص افکت آن را تنظیم کنید.

ویژگی انتقال دارای سه مقدار است: یک ویژگی انتقال (در مورد ما، همه آنها)، یک سرعت انتقال (در مورد ما 0.3 ثانیه) و یک مقدار سوم که به شما امکان می دهد نحوه محاسبه شتاب و کاهش سرعت را تغییر دهید، اما ما به تنظیمات پیش‌فرض پایبند می‌مانم، این قسمت خالی است.

اکنون تنها کاری که باید انجام دهیم این است که ویژگی ها را تغییر دهیم و آنها انیمیشن را برای ما ایجاد کنند.

اگر می خواهید به تنهایی ادامه دهید، پس فایل های نمایشی برای شما مناسب هستند.

1. کم نور شدن

ایجاد جلوه های کم نور یک درخواست نسبتاً رایج از سوی مشتریان است. این یک راه عالی برای تأکید بر عملکرد یا جلب توجه به یک فراخوان است.

افکت در دو مرحله کدگذاری می شود: اول، شما حالت اولیه را تنظیم می کنید. بعد تغییر را تنظیم کنید، به عنوان مثال روی شناور ماوس:

محو شدن ( opacity:0.5; ) .fade:hover ( opacity:1; )

(مطمئن شوید که به div خود کلاس "fade" داده اید تا ببینید چگونه کار می کند.)

2. تغییر رنگ

در گذشته، متحرک سازی یک تغییر رنگ بسیار پیچیده بود، که شامل ریاضیات درگیر در محاسبه مقادیر فردی RGB و سپس ترکیب مجدد آنها می شد. اکنون فقط کلاس div را روی "color" قرار می دهیم و رنگ مورد نظر خود را در CSS تنظیم می کنیم:

رنگ: شناور (پس‌زمینه:#53a7ea؛ )

3. بزرگنمایی و کوچکنمایی

روزی روزگاری برای بزرگتر کردن یک عنصر، باید از عرض و ارتفاع آن یا پارامتر padding استفاده می کرد. اما در حال حاضر، می توانیم از تبدیل CSS3 برای بزرگتر کردن آن استفاده کنیم.

کلاس div خود را روی "grow" تنظیم کنید و سپس این کد را به سبک بلوک خود اضافه کنید:

رشد: شناور (-webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); )

کوچک کردن یک عنصر به سادگی گسترش آن است. برای افزایش یک عنصر، مقداری بزرگتر از 1 و برای کاهش آن، مقدار کمتر از 1 را مشخص می کنیم:

Shrink:hover (-webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); )

4. پیچ خوردگی عناصر

CSS تعدادی تبدیل را ارائه می دهد و یکی از بهترین آنها چرخش عناصر است. به div خود کلاس "rotate" بدهید و خطوط زیر را به CSS خود اضافه کنید:

چرخش: شناور (-webkit-transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg)؛ تبدیل: rotateZ(-30deg)؛ )

5. تبدیل مربع به دایره

در حال حاضر اثر تبدیل یک عنصر مربع به یک گرد و بالعکس بسیار محبوب است. از جانب با استفاده از CSSدستیابی به این امر آسان است، ما فقط ویژگی شعاع مرزی را انتقال می دهیم. ما فقط از ویژگی border-radius استفاده می کنیم.

به div خود کلاس «دایره» بدهید و این خطوط را به شیوه نامه خود اضافه کنید:

دایره: شناور (شعاع مرزی: 50٪؛ )

6. سایه سه بعدی

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

این افکت با افزودن یک مستطیل سایه و سپس حرکت عنصر بر روی محور x با تغییر خصوصیات تبدیل و ترجمه به‌طوری که به نظر می‌رسد عنصر در حال رشد از صفحه نمایش است، به دست می‌آید.

به div خود کلاس "threed" بدهید و سپس کد زیر را به CSS خود اضافه کنید:

Threed:hover (box-shadow: 1px 1px #53a7ea, 2px 2px #53a7ea, 3px 3px #53a7ea; -webkit-transform: translateX(-3px)؛ تبدیل: translateX(-3px)؛ )

7. تکان دادن

همه عناصر از ویژگی انتقال استفاده نمی کنند. همچنین می‌توانیم انیمیشن‌های بسیار پیچیده را با استفاده از @keyframes، انیمیشن‌ها و animation-iterations ایجاد کنیم.

در این مورد، ابتدا انیمیشن های CSS را در استایل ها تعریف می کنیم. متوجه خواهید شد که به دلیل مشکلات پیاده سازی، باید از @-webkit-keyframes و همچنین @keyframes استفاده کنیم (بله، اینترنت اکسپلوررحداقل از این نظر بهتر از کروم است).

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(5px); transform: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px); transform: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); transform: translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transform: translateX(-3px);) 80% ( -webkit -transform: translateX(2px)؛ transform: translateX(2px); ) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing ( 15% ( -webkit-transform: translateX(5px)؛ transform: translateX(5px); ) 30% ( -webkit-transform: translateX(-5px)؛ transform: translateX(-5px); ) 50% ( -webkit-transform: translateX(3px); transform : translateX(3px); ) 65% ( -webkit-transform: translateX(-3px); transform: translateX(-3px); ) 80% ( -webkit-transform: translateX(2px); transform: translateX(2px); ) 100% (-webkit-transform: translateX(0); transform: translateX(0); ))

8. یک حاشیه بچسبانید

یکی از داغ ترین سبک های دکمه در حال حاضر، دکمه شبح است. دکمه بدون پس زمینه و حاشیه ضخیم. البته می‌توانیم فقط یک حاشیه به یک عنصر اضافه کنیم، اما این موقعیت عنصر را تغییر می‌دهد. ما می توانیم این مشکل را با اندازه جعبه حل کنیم، اما خیلی بیشتر. راه حل سادهانتقال به مرز با قرار دادن یک سایه است.

به کیس خود کلاس "border" بدهید و CSS زیر را برای استایل های خود اضافه کنید:

حاشیه: شناور (box-shadow: inset 0 0 0 25px #53a7ea; )

میخوای بدونی، ؟ یا ؟ همه اینها و بیشتر در سایت. در خبرنامه پست الکترونیکی ما (در پایین صفحه) مشترک شوید و اولین کسی باشید که از مقالات جدید مطلع می شوید! همچنین به ما بپیوندید

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

در داخل عنصر view یک عنصر با ماسک کلاس وجود دارد که افکت ما را با آن پیاده سازی می کند با استفاده از CSS 3. یک عنصر با یک کلاس ماسک حاوی عنوان، توضیحات و پیوند است (برای برخی از مثال‌ها، یک عنصر با کلاس ماسک به تنهایی استفاده می‌شود و محتوا در ظرفی با یک کلاس محتوا قرار می‌گیرد).

سرتیتر

متن پیام

دکمه

css

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

نمایش (عرض: 300 پیکسل؛ ارتفاع: 200 پیکسل؛ حاشیه: 10 پیکسل؛ شناور: چپ؛ حاشیه: 10 پیکسل ثابت #fff؛ سرریز: پنهان؛ موقعیت: نسبی؛ تراز نوشتاری: مرکز؛ کادر-سایه: 1px 1px 2px #e6e6e6؛ مکان‌نما : پیش‌فرض؛ پس‌زمینه: آدرس اینترنتی #fff (../images/bgimg.jpg) مرکز بدون تکرار) بالا: 0؛ سمت چپ: 0) .نمایش img (نمایش: بلوک؛ موقعیت: نسبی) .نمایش h2 (تبدیل متن: حروف بزرگ؛ رنگ: #fff؛ تراز کردن متن: مرکز؛ موقعیت: نسبی؛ اندازه قلم: 17 پیکسل ؛ بالشتک: 10 پیکسل؛ پس‌زمینه: rgba(0، 0، 0، 0.8)، حاشیه: 20 پیکسل 0 0 0 : نسبی؛ رنگ: #fff؛ بالشتک: 10 پیکسل 20 پیکسل 20 پیکسل؛ تراز نوشتاری: وسط ) .view a.info (نمایش: بلوک درون خطی؛ تزیین متن: هیچ؛ پد: 7 پیکسل 14 پیکسل؛ پس‌زمینه: #000؛ رنگ: #fff؛ تبدیل متن: بزرگ؛ کادر سایه: 0 0 1px #000) .view a.info:hover (box-shadow: 0 0 5px #000 )

حالا 10 افکت را تصور کنید. صفحه نمایشی را در یک پنجره یا تب جداگانه باز کنید، کد را تماشا و مطالعه کنید.

مثال 1

یک کلاس view-first ویژه به عنصر با کلاس view برای این افکت اضافه می کنیم. یک کلاس خاص در هر مثال به یک عنصر با کلاس view (view-first، view-second، view-third و غیره) اضافه می شود.

AT این مثالانتقال پایه برای ایجاد یک اثر عالی استفاده خواهد شد.

View-first img (transition: all 0.2s linear; ) .view-first .mask ( opacity: 0; background-color: rgba(219,127,8, 0.7)؛ transition: all 0.4s ease-in-out; ) . view-first h2 ( transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; ) .view-first p (translate: translateY(100px); opacity: 0; transition: all 0.2 s خطی؛ ) .view-first a.info( opacity: 0; transition: all 0.2s ease-in-out; )

و حالا بیایید به اساس تأثیر خود برویم. هنگامی که نشانگر ماوس از روی تصویر عبور می کند، از یک تاخیر برای شبیه سازی یک انیمیشن ساده استفاده می کنیم. ویژگی transition-delay، که در کلاس‌های کاذب شناور استفاده می‌شود، می‌تواند تغییر کند تا از یک کلاس معمولی متفاوت باشد. در این مثال، ما از تاخیر در کلاس عادی استفاده نمی کنیم، اما در کلاس های کاذب شناور، انتقال ها کمی با تاخیر انجام می شود. هنگامی که نشانگر ماوس از شی خارج می شود، مقدار پیش فرض 0s استفاده می شود و "بازیابی" به سرعت انجام می شود.

View-first:hover img ( transform: scale(1.1); ) .view-first:hover .mask ( opacity: 1; ) .view-first:hover h2, .view-first:hover p, .view-first: hover a.info ( opacity: 1; transform: translateY(0px); ) .view-first:hover p (transition-delay: 0.1s; ) .view-first:hover a.info (transition-delay: 0.2s; )

مثال 2

در مثال دوم، یک کلاس view-second ویژه اضافه می کنیم، اما عنصر با کلاس ماسک خالی خواهد بود و محتوا در عنصر با محتوای کلاس قرار می گیرد.

سبک شماره 2

شرح

دکمه

در اینجا کلاس mask ویژگی های دیگری برای ساخت افکت دارد. ما قصد داریم از ویژگی های تبدیل (ترجمه و چرخش) استفاده کنیم:

نمایش تصویر دوم ( انتقال: همه 0.2 ثانیه ease-in؛ ) .view-second .mask ( رنگ پس زمینه: rgba(115,146,184, 0.7)؛ عرض: 300 پیکسل؛ پد: 60 پیکسل؛ ارتفاع: 300 پیکسل؛ تغییر شکل: 0؛ : translate(265px, 145px) rotate(45deg)؛ انتقال: همه 0.2s ease-in-out; ) .view-second h2 ( حاشیه پایین: 1px solid rgba(0, 0, 0, 0.3)؛ پس زمینه: شفاف ؛ حاشیه: 20 پیکسل 40 پیکسل 0 پیکسل 40 پیکسل؛ تبدیل: ترجمه (200 پیکسل، -200 پیکسل؛ انتقال: همه 0.2 ثانیه ease-in-out؛ ) .view-second p (translate: translate(-200px, 200px)؛ انتقال: همه 0.2. s ease-in-out; ) .view-second a.info (transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out;)

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

View-second:shover .mask ( opacity:1; transform: translate(-80px, -125px) rotate(45deg)); .view-second:hover s; ) .view-second:hover p ( transform: translate(0px,0px); transition-delay: 0.4s; ) .view-second:hover a.info ( transform: translate(0px,0px); transition-delay : 0.5 ثانیه؛ )

مثال 3

در مثال سوم، ما از تبدیل‌های ترجمه و چرخش برای رندر عناصر توضیحات خود استفاده می‌کنیم:

نمای سوم تصویر ( انتقال: همه 0.2s ease-in؛ ) .view-third .mask ( پس زمینه رنگ: rgba(0,0,0,0.6)؛ کدورت: 0؛ تبدیل: translate (460px, -100px) چرخش (180 درجه)؛ انتقال: همه 0.2 ثانیه 0.4 ثانیه ease-in-out؛ ) .view-third h2( transform: translateY(-100px); transition: همه 0.2s ease-in-out;) .view-third p ( تبدیل: translateX(300px) چرخش (90 درجه)؛ انتقال: همه 0.2 ثانیه ease-in-out؛ ) .view-third a.info ( transform: translateY(-200px)؛ انتقال: همه 0.2s ease-in-out ;)

کافی دستورالعمل های سادهبرای دریافت اثر

View-third:shover .mask ( opacity:1; transition-delay: 0s; transform: translate(0px, 0px); ) .view-third:hover h2 (translate: translateY(0px); transition-Delay: 0.5s; ) .view-third:hover p ( تبدیل: translateX(0px) rotate(0deg); transition-delay: 0.4s; ) .view-third:hover a.info (translate: translateY(0px); transition-delay: 0.3 s;)

مثال 4

مثال چهارم از یک تصویر ساده و مقیاس بندی محتوا با استفاده از تبدیل مقیاس استفاده می کند. تصویر در سبک ها 0.2 ثانیه تاخیر دارد، اما در حالت شناور تاخیر 0 ثانیه خواهد بود. بنابراین، هنگامی که نشانگر ماوس را جابجا می کنید، بلافاصله اثر ظاهر می شود و زمانی که نشانگر ماوس را بردارید، تاخیر ایجاد می شود.

نمای چهارم تصویر ( انتقال: همه 0.4s ease-in-out 0.2s; opacity: 1; ) : مقیاس (0) چرخش (-180 درجه)؛ انتقال: همه 0.4 ثانیه آسان، شعاع حاشیه: 0 پیکسل؛ .نمای چهارم h2( کدورت: 0؛ حاشیه-پایین: 1 پیکسل rgba جامد (0، 0، 0) , 0.3؛ پس‌زمینه: شفاف؛ حاشیه: 20 پیکسل 40 پیکسل 0 پیکسل 40 پیکسل؛ انتقال: همه 0.5 ثانیه ease-in-out؛ .view-fourth p ( کدورت: 0؛ انتقال: همه 0.5 ثانیه ease-in-out؛ ) . view-fourth a.info ( opacity: 0؛ transition: all 0.5s ease-in-out؛ )

دستورالعمل های ساده برای دریافت اثر. CSS3 می تواند همه چیز را انجام دهد.

View-fourth:hover .mask ( opacity: 1; transform: scale(1) rotate(0deg); transition-dalay: 0.2s; ) .view-fourth:hover img (transform: scale(0); opacity: 0; transition-delay: 0s; ) .view-fourth:h2 hover, .view-fourth:hover p, .view-fourth:hover a.info( opacity: 1; transition-delay: 0.5s; )

مثال 5

در مثال پنجم، با استفاده از ویژگی translate در ترکیب با تابع انتقال ease-in-out، محتوا از سمت چپ خارج می شود.

View-fifth img ( Transition: all 0.3s ease-in-out; ) .view-fifth .mask ( پس زمینه-رنگ: rgba(146,96,91,0.3)؛ تبدیل: translateX(-300px)؛ کدورت: 1 ؛ انتقال: همه 0.4s ease-in-out؛ .view-fifth h2( پس زمینه: rgba(255, 255, 255, 0.5)؛ رنگ: #000؛ box-shadow: 0px 1px 3px rgba(159, 141, 140، 0.5)؛ .view-fifth p( opacity: 0; color: #333; transition: all 0.2s linear; )

هنگامی که ماوس را روی ماوس نگه می‌دارید، تصویر به سمت راست می‌لغزد، و توضیحی در جای خود در سمت چپ بیرون می‌آید، گویی تصویر را جابه‌جا می‌کند:

View-fifth:hover .mask ( transform: translateX(0px); ) .view-fifth:hover img ( transform: translateX(300px); transition-delay: 0.1s;) .view-fifth:hover p( opacity: 1 ؛ انتقال-تاخیر: 0.4 ثانیه؛ )

مثال 6

در این مثال، با بزرگنمایی از 10 به 1 (اندازه معمولی) محتوا را از پیش زمینه خارج می کنیم. و دکمه از پایین به بیرون می لغزد.

نمای ششم تصویر ( انتقال: همه 0.4s ease-in-out 0.5s; ) ease-in 0.4s; ) .view-sixth h2( opacity:0; border-bottom: 1px solid rgba(0, 0, 0, 0.3؛ پس‌زمینه: شفاف؛ حاشیه: 20px 40px 0px 40px؛ تبدیل: scale(10)؛ انتقال: همه 0.3s ease-in-out 0.1s؛ .view-6th p ( opacity:0; transform: scale(10 انتقال: همه 0.3s ease-in-out 0.2;

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

View-sixth:hover .mask ( opacity:1; transition-delay: 0s; ) .view-sixth:hover img (transition-delay: 0s; ) .view-sixth:hover h2 ( opacity: 1; transform: scale( 1)؛ انتقال-تاخیر: 0.1 ثانیه؛) .view-sixth:hover p ( opacity:1؛ transform: scale(1؛ transition-delay: 0.2s; ) .view-sixth:hover a.info ( opacity: 1؛ تبدیل: translateY(0px؛ انتقال-تاخیر: 0.3 ثانیه؛ )

مثال 7

در جلوه هفتم، ایده استفاده از چرخش تصویر به دور مرکز و در عین حال کوچک کردن آن است. و سپس توضیحات از بالا پایین می آید.

View-seventh img(transition: all 0.5s ease-out; opacity: 1;) .view-seventh .mask ( پس زمینه-رنگ: rgba(77,44,35,0.5)؛ تبدیل: rotate(0deg) scale(1 کدورت: 0؛ انتقال: همه 0.3s ease-out؛ تبدیل: translateY(-200px) rotate(180deg); -out; ) .view-seventh p ( transform: translateY(-200px); transition: all 0.2s ease-in-out; ) .view-seventh a.info (translate: translateY(-200px); transition: all 0.2 سهولت در خروج؛ )

هنگامی که ماوس را روی آن قرار می دهید، عناصر توضیحات با تاخیر ظاهر می شوند:

view-seventh:hover img(transform: rotate(720deg) scale(0); opacity: 0; ) .view-seventh:hover .mask ( opacity: 1; transform: translateY(0px) rotate(0deg) transition-delay : 0.4s; ) .view-seventh:shover h2 ( transform: translateY(0px); transition-delay: 0.7s; ) .view-seventh:hover p (translate: translateY(0px); transition-delay: 0.6s; ) .view-seventh:hover a.info ( تبدیل: translateY(0px؛ انتقال-تاخیر: 0.5 ثانیه؛ )

مثال 8

این مثال زمانی که عناصر توضیحات از بالا حذف می شوند، یک افکت پرش ایجاد می کند.

نمایش هشتم .mask ( پس‌زمینه-رنگ: rgba(255، 255، 255، 0.7)؛ بالا: -200 پیکسل؛ کدورت: 0؛ انتقال: همه 0.3 ثانیه ease-out 0.5 ثانیه؛ .نمایش-هشتم h2( تبدیل: .view-eightth p ( رنگ: #333؛ تبدیل: translateY(-200px)؛ انتقال: همه 0.2 ثانیه ease-in-out 0.2 ثانیه؛ .view-eightth a.info ( تبدیل: translateY(-200px)؛ انتقال : همه 0.2s ease-in-out 0.3s؛ )

ما یک انیمیشن به عنصر mask اضافه می کنیم و تاخیر برای عناصر توضیحات تعریف می کنیم:

View-eightth:hover .mask ( opacity: 1; top: 0px; transition-dalay: 0s; animation: bounceY 0.9s linear; ) .view-eight:hover h2 ( transform: translateY(0px); transition- تاخیر: 0.4 s;) .view-eightth:hover p (translate: translateY(0px); transition-delay: 0.2s;)

برای ایجاد افکت bounce، از تابع translateY و چند فریم استفاده کنید:

@keyframes bounceY ( 0% ( تبدیل: translateY(-205px)؛) 40% ( تبدیل: translateY(-100px)؛) 65% ( تبدیل: translateY(-52px)؛) 82% ( تبدیل: translateY(-25px) ;) 92٪ ( تبدیل: translateY(-12px)؛) 55٪، 75٪، 87٪، 97٪، 100٪ (translate: translateY(0px);))

مثال 9

در این مثال، ما از دو عنصر ماسک برای ایجاد اثر بسته شدن پرده ها استفاده می کنیم:

سبک شماره 9

شرح

دکمه

این دو ماسک گزینه های تغییر شکل متفاوتی دارند. آنها همچنین به طور متفاوت تراز شده اند.

View-ninth .mask-1, .view-ninth .mask-2( پس زمینه-رنگ: rgba(0,0,0,0.5)؛ ارتفاع: 361px؛ عرض: 361px؛ پس زمینه: rgba(119,0,36, 0.5)؛ کدورت: 1؛ انتقال: همه 0.3s ease-in-out 0.6s؛ .view-ninth .mask-1 ( چپ: خودکار؛ راست: 0px؛ تبدیل: چرخش (56.5 درجه) translateX (-180px) ؛ مبدا تبدیل: 100% 0%؛ .view-ninth .mask-2 (بالا: خودکار؛ پایین: 0 پیکسل؛ تبدیل: چرخش (56.5 درجه) translateX (180 پیکسل؛ مبدا تبدیل: 0% 100%؛ )

View-ninth .content( background: rgba(0,0,0,0.9); ارتفاع: 0px; opacity: 0.5; عرض: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px,166px) ؛ مبدا تبدیل: 0% 100%؛ انتقال: همه 0.4s ease-in-out 0.3s؛ ) .نمایش-نهم h2( پس زمینه: شفاف؛ حاشیه بالا: 5px؛ حاشیه-پایین: 1px جامد rgba(255,255,255, 0.2)؛ .view-ninth a.info(نمایش: هیچکدام؛ )

هنگامی که ماوس را روی مکان‌نمای ماوس قرار می‌دهید، محتوای حاشیه ماسک‌های تماس ظاهر می‌شود:

نمای نهم: شناور محتوا. view-ninth:hover .mask-2(transition-delay: 0s; ) .view-ninth:hover .mask-1(transform: rotate(56.5deg) translateX(1px); .view-ninth:hover .mask- 2 ( تبدیل: چرخش (56.5 درجه) translateX (-1 پیکسل)؛ )

ماسک‌ها از ویژگی transition-delay استفاده می‌کنند، بنابراین وقتی ماوس را روی ماوس می‌برید، تبدیل‌ها بلافاصله شروع می‌شوند. اما تبدیل معکوس به تأخیر می افتد تا محتوا فرو بریزد.

مثال 10

AT آخرین نمونهتصویر با تغییر همزمان در شفافیت بزرگ می شود و محتوا به اندازه های معمولی بزرگ می شود.

نمایش دهم تصویر ( تبدیل: scaleY(1)؛ انتقال: همه 0.7s ease-in-out؛ ) s خطی؛ کدورت: 0؛ ) .نمای دهم h2( حاشیه-پایین: 1px جامد rgba(0, 0, 0, 0.3)؛ پس‌زمینه: شفاف؛ حاشیه: 20px 40px 0px 40px؛ تبدیل: مقیاس(0)؛ رنگ : #333؛ انتقال: همه 0.5 ثانیه خطی؛ کدورت: 0؛ .نمای دهم p (رنگ: #333؛ کدورت: 0؛ تبدیل: مقیاس (0؛ انتقال: همه 0.5 ثانیه خطی؛ ) .نمای دهم a.info ( کدورت: 0؛ تبدیل: مقیاس (0؛ انتقال: همه 0.5 ثانیه خطی؛ )

نگه داشتن ماوس روی آن به سادگی مقیاس و شفافیت تصویر را تغییر می دهد:

View-tenth:hover img (transform: scale(10); opacity: 0; ) .view-tenth:hover .mask ( opacity: 1; ) .view-tenth:h2 hover, .view-tenth:hover p, . view-tenth:hover a.info(transform: scale(1); opacity: 1; )

نتیجه

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

اغلب در سایت‌ها می‌توانید تغییر یا دکمه‌هایی را در حالت شناور ببینید. یک شبه کلاس ویژه: شناور در CSS به شما امکان می دهد کار را پیاده سازی کنید. امروز ترفندهایی را در نظر خواهیم گرفت که به شما امکان می دهد این ویژگی را بسازید و در زیر لیستی از جالب ترین آنها را (با توضیحات / توضیحات مختصر) منتشر خواهیم کرد. همه گزینه ها به دو دسته تقسیم می شوند:

این گروه ها بسیار مشروط هستند، زیرا. بسیاری از نمونه ها تلاقی می کنند و جهانی هستند، یعنی می توانند هنگام طراحی اشیاء مختلف رخ دهند.

اثر شناور در سبک های CSSدر سمت راست عنصر به این صورت اضافه می شود:

الف: شناور (رنگ: قرمز؛ )

a:hover (رنگ: قرمز؛ )

بیشتر اوقات ، این مکانیسم به طور خاص برای پیوندها به منظور تغییر رنگ آنها یا اضافه کردن / حذف خط زیر استفاده می شود. با این حال، می‌توان آن را روی بلوک‌ها، دکمه‌ها، متون دیگر تنظیم کرد یا هنگام ایجاد استفاده کرد.

دکمه: شناور (پس‌زمینه: rgba (0، 0، 0، 0)؛ رنگ: قرمز؛)

دکمه: شناور (پس‌زمینه: rgba(0,0,0,0)؛ رنگ: قرمز؛ ) .my-picture:hover ( opacity: 0.5؛ فیلتر: آلفا (تاری = 50)؛ )

مرورگرهای مدرن به همان اندازه جلوه شناور CSS را به خوبی مدیریت می‌کنند، اگرچه نسخه‌های قدیمی‌تر IE 6 و پایین‌تر فقط روی پیوندها کار می‌کنند. به علاوه، برخی منابع گفتند که این باید در کد مشخص شود.

به هر حال، هنگام تنظیم سبک های پیوند، انتخابگرها همچنین می توانند مورد استفاده قرار گیرند: پیوند - برای صفحاتی که هنوز بازدید نشده اند، : بازدید شده - آنهایی که قبلاً در آنها بوده اید + : فعال آدرسی را که در حال حاضر فعال است تعیین می کند. مهم است که افکت hover را در CSS بعد از :link و :visited در صورت وجود قرار دهید.

بیایید از تئوری به عمل برویم. در زیر لیستی از مطالب و قطعات مفید وجود دارد - برای مشاهده منبع لینک ها را دنبال کنید.

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

همانطور که در بالا گفتیم، این محبوب ترین دسته از اشیاء در سایتی است که این تکنیک در آن یافت می شود. در اینجا چند گزینه برای شما وجود دارد.

مثال های ساده برای دکمه ها

دکمه های سالیوان

ترفند این است که وقتی روی دکمه های مختلف قرار می گیرید، علاوه بر تغییر رنگ پس زمینه، یک انیمیشن کوچک با آیکون ها نیز راه اندازی می شود (هر کدام مخصوص به خود).

نمادهای CSS در Hover

مجموعه ای از 5 گزینه ساده برای اجرای کار. در همه موارد، نمادهای اضافی درگیر هستند که در سمت راست / چپ متن ظاهر می شوند یا آن را جایگزین می کنند.

جلوه های شناور دکمه

در مقایسه با مثال قبلی، این 12 تابع ماشه بسیار جالب تر به نظر می رسند: هم از نظر بصری و هم از نظر کد. بدون JS نیست.

Nav Hovers

چند ترفند که به شما امکان می دهد کاری غیرعادی تر از ویژگی اصلی تزئین متن انجام دهید. پس زمینه دکمه علاوه بر این با جلوه های بصری مختلف پر شده است.

اطلاعات مربوط به Hover

عملکرد راهنمای ابزار در حال حاضر در همه مرورگرها پشتیبانی می شود، اما شما می توانید آن را مطابق با نیاز خود سفارشی کنید. در مثال فعلی، شبه کلاس برای تگ dfn فعال می شود و شیک به نظر می رسد. کد کاملا فشرده HTML + CSS است.

دکمه مانا

یکی از اصلی ترین انواع اثر شناور در بلوک ها - هنگام شناور شدن، مانند پر کردن آن با مایع است. پیاده سازی از CSS، HTML و SVG استفاده می کند. در یک موضوع خاص از سایت ها، این قطعه قطعا یک موهبت الهی خواهد بود.

افکت های شناور برای تصاویر

15 ترفند اساسی

علیرغم اینکه این مقاله مدت ها پیش منتشر شده است، روش ها هنوز به درستی کار می کنند. در اینجا، احتمالاً، همه تبدیل‌های معمولی ممکن برای گرافیک جمع‌آوری شده‌اند: چندین نوع زوم، چرخش، تاری، b/w، شفافیت، فیلترها، درخشندگی، و غیره. مواد بسیار مفید.

تصاویر جلوه های شناور زیبا

مجموعه ای از 30 عمل زیبا و روان هنگام نگه داشتن ماوس روی یک عکس. به دلیل دستکاری های ساده بصری در قالب زوم، اضافه کردن خطوط، یک تصور پیچیده خوب ایجاد می شود. در برخی مکان‌ها عنوان افزایش می‌یابد و توضیح کوتاه «بلند می‌شود». گزینه عالی برای نمونه کارها.

انیمیشن Barberpole Hover

در نگاه اول پیچیده نیست، انیمیشن، که در پایان بسیار سرد و غیر استاندارد به نظر می رسد.

جلوه های شناور CSS با تشخیص جهت

مجموعه ای عالی از قطعه ها و کدهای مربوط به موضوع را می توانید در مقاله css-tricks.com پیدا کنید. همه این نمونه ها با این واقعیت متحد می شوند که در طول کار مکان و جهت حرکت مکان نما مشخص می شود. این به نوبه خود به شما این امکان را می دهد که هنگام قرار دادن ماوس روی عناصر صفحه واکنش های کاملاً اصلی ایجاد کنید:

در بسیاری از راه‌حل‌های پیچیده جاوا اسکریپت و جی کوئری برای افکت‌های شناور، می‌توانید به‌طور قابل‌توجهی نتیجه را متنوع کرده و بهبود بخشید.

جهت آگاه شناور خوبی

کاشی های آگاه جهت با استفاده از مسیر کلیپ CSS خالص

بقیه تراشه ها را در مقاله اصلی جستجو کنید.

انیمیشن

در این توسعه، بیش از 100 راه های سادهتصاویر یا اشیاء موجود در شناور را «متحرک کنید». با کمک این توابع می توانید ظاهر متفاوتی از دکمه ها، عنوان ها، متون، نمادهای اجتماعیو غیره. گزینه هایی با تغییر نمایش تصاویر، پوشش های پس زمینه شفاف وجود دارد.

این پیوند حاوی 7 افکت سرفصل شناور CSS3 است - هنگام قرار دادن ماوس روی یک تصویر، کاربر یک بلوک اطلاعاتی را با عنوان مشاهده می کند. توضیح مختصرو لینک رفتن نمی توان گفت که نمونه ها بسیار اصلی هستند، اما قطعا به تنوع بخشیدن به یک پروژه محتوای ثابت کمک می کنند.

کتابخانه های شناور CSS

hover.css

پروژه بدون عارضه Hover.css حاوی مجموعه ای از افکت های CSS3 برای پیوندها، دکمه ها، بلوک ها و غیره است. می توانید از کد آماده استفاده کنید و / یا تغییرات خود را به آن اضافه کنید. چیزهای جالب زیادی در اینجا وجود دارد: تبدیل های 2 بعدی/3 بعدی، کار با پس زمینه و قاب ها، سایه ها، آیکون ها. راه حل در فرمت های CSS، LESS و Sass موجود است.

Imagehover.css

کتابخانه دیگری که جلوه‌های شناور را برای تصاویر تنظیم می‌کند، در این کتابخانه قرار دارد نسخه رایگانشما 44 گزینه تغییر شکل پیدا خواهید کرد (مجموعه پریمیوم حاوی 5 برابر بیشتر از آنها است). LESS و SCSS نیز در اینجا پشتیبانی می شوند، این مورد تنها 19 کیلوبایت وزن دارد. این سایت دارای صفحه ای با نمایش تمام نمونه های کار است. بسیاری از ویژگی های منحصر به فرد را ارائه می دهد که در بالا دیده نشده است.

این پروژه دارای بیش از 30 تکنیک مختلف برای اجسام گرد و مربع است. همه آنها کاملاً اصلی هستند ، عملاً هیچ اقدام ساده "تک عنصری" به شکل بزرگنمایی / پرواز کردن معمولی وجود ندارد. این کار در CSS3 + HTML خالص اجرا می شود (به علاوه فایل های Scss گنجانده شده است). سازگاری عالی با بوت استرپ 3، مستندات وجود دارد.

جمع.امیدواریم این افکت های شناور css بر روی تصاویر، بلوک ها، لینک ها و سایر عناصر صفحه به شما در درک این موضوع کمک کرده باشد. شما می توانید موفق ترین راه حل ها را، به نظر خود، در سایت های خود پیاده سازی کنید - چه اتصال یک کتابخانه کامل یا به سادگی یکپارچه سازی یک نسخه کوچک از کد.

اگر ویژگی‌ها و تکه‌های جالب دیگری می‌شناسید، لطفاً آدرس‌های اینترنتی را در نظرات برای آنها ارسال کنید. و در آینده مقاله را به روز خواهیم کرد.

اگر افکت را دوست دارید، می توانید فقط کد تمام شده را کپی کرده و از آن استفاده کنید!

وب سایت خود را زنده کنید!

افکت های شناور مختلف می توانند به صفحات سایت شما تازگی بیاورند. قبلاً برای هر اثری باید با جاوا اسکریپت سر و کار داشت، اما امروزه پس از ظهور فناوری CSS3، همه چیز را می توان با دور زدن استفاده از جاوا اسکریپت انجام داد.

نمونه‌های امروزی همگی برای مرورگرهای مدرن جدید پیاده‌سازی و بهینه‌سازی شده‌اند و مطمئناً در آنها (مثلاً در مرورگرهای خانواده Mozilla یا WebKit) کار خواهند کرد. ما نمی توانیم به شما در مورد کار در اینترنت اکسپلورر اطمینان دهیم، اما در جدیدترین نسخه ها قطعاً افکت ها همانطور که باید کار می کنند. اما فراموش نکنید که برای هر افکت یک گزینه بازگشت جذاب در صورتی که مرورگر همچنان از افکت پشتیبانی نمی کند آماده شده است.

01. بزرگنمایی

نسخه ی نمایشی:برای مشاهده

اجرای این افکت بسیار ساده است و می توان آن را به روش های مختلفی پیاده سازی کرد. ما از روشی استفاده کردیم که در آن یک پارامتر حاشیه به هر تصویر اضافه می‌شود، و سپس، هنگامی که نشانگر ماوس قرار می‌گیرد، این پارامتر حذف می‌شود. فرض کنید تنظیمات حاشیه از 15 پیکسل شروع می شود و در حالت شناور به 2 پیکسل تبدیل می شود، که باعث می شود تصویر به نظر پرش شود. شما همچنین می توانید فقط از این افکت با متن استفاده کنید، حتی اگر پیوندها به جای افقی عمودی باشند.

انتقال در اینجا می تواند به صلاحدید شما تنظیم شود، و همچنین اثر بدون هیچ گونه انتقالی جذاب خواهد بود. به عنوان مثال، ما افکت را کمی صاف کردیم، که فکر می‌کردیم به افکت خوشبو می‌شود.

CSS را افزایش دهید

Ex1 img(
حاشیه: 5px جامد #ccc;
شناور به سمت چپ؛
حاشیه: 15 پیکسل
-webkit-transition: حاشیه 0.5s ease-out.
-moz-transition: حاشیه 0.5s ease-out.
-o-transition: حاشیه 0.5s ease-out.
}

Ex1 img: شناور (
margin-top: 2px;
}
02. Stack & Grow

نسخه ی نمایشی:برای مشاهده

ظاهراً نویسنده این افکت می خواست به نوعی جلوه لامپ گدازه دست یابد، زیرا وقتی با ماوس روی لیست پیوندها قرار می گیرید، هر تصویر به آرامی بزرگ می شود و سپس به اندازه اصلی خود باز می گردد.

برای پیاده سازی، تصاویری با اندازه 400x133 پیکسل در اینجا استفاده شده است. سپس با CSS اندازه آنها به 300x100 پیکسل تغییر داده شد و با شناور بزرگ شدند. از آنجایی که در مثال کل لیست تراز وسط است، اندازه جدید تصاویر کل تراز را شکسته است. این مشکل را می توان با تنظیم حاشیه های منفی به نصف عرض تصاویر بزرگ شده حل کرد.

کد CSS برای Stack & Grow

/*مثال 2*/
#ظرف (
عرض: 300 پیکسل
حاشیه: 0 خودکار;
}

#ex2 img(
ارتفاع: 100 پیکسل؛
عرض: 300 پیکسل
حاشیه: 15 پیکسل 0;
-webkit-transition: all 1s ease.
-moz-transition: همه 1 ها سهولت.
-o-transition: همه 1 ها ease.
}

#ex2 img: شناور (
ارتفاع: 133px;
عرض: 400 پیکسل
حاشیه سمت چپ: -50 پیکسل.
}
03. متن را محو کنید

نسخه ی نمایشی:برای مشاهده

در اینجا نویسنده می خواست چیزی شبیه به یک رویداد ایجاد کند نوع جاوا اسکریپتهنگامی که ماوس را روی یک آیتم نگه می دارید و اثر روی مورد دیگر نمایش داده می شود. در اینجا، متن و تصویر گرفته شده و سپس در یک div تراز چپ جداگانه قرار داده شده است. سپس رنگ: شفاف و ارتفاع خط: 0px به div اضافه شد. این به متن اجازه داد تا در بالای div قرار گیرد و به طور کلی پنهان شود.

برای اینکه متن دوباره ظاهر شود، به سادگی رنگ و ارتفاع خط را تغییر می دهیم. وقتی ماوس را روی تصویر می‌برید، متن دوباره ظاهر می‌شود. جلوه بسیار سرگرم کننده و سبک.

محو کردن متن در اثر کد CSS

#ex3(
عرض: 730 پیکسل
ارتفاع: 133px;
ارتفاع خط: 0 پیکسل
رنگ: شفاف
اندازه فونت: 50px;
font-family: "HelveticaNeue-Light"، "Helvetica Neue Light"، "Helvetica Neue"، Helvetica، Arial، sans-serif;
وزن قلم: 300
تبدیل متن: بزرگ;

}

#ex3: شناور(
ارتفاع خط: 133 پیکسل.
رنگ: #575858;
}

#ex3 img(
شناور به سمت چپ؛
حاشیه: 0 15 پیکسل;
}
04. عکس کج

نسخه ی نمایشی:برای مشاهده

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

مقادیر زیادی CSS جدید برای استفاده در اینجا وجود دارد، بنابراین ارزش آن را دارد که گزینه بازگشتی را برای اطلاعات بیشتر در نظر بگیرید. نسخه های اولیهمرورگرها در گالری ما، از ترانزیشن ها، تبدیل ها و همچنین سایه های بلوک استفاده می شود، البته طبق میل شما. تبدیل مسئول چرخش تصویر خواهد بود و انتقال ها مسئول جلوه نرم و صاف خواهند بود.

در اینجا می توانید از شبه انتخابگرها استفاده کنید.

کد CSS برای عکس کج

#ex4 (
عرض: 800 پیکسل
حاشیه: 0 خودکار;
}

#ex4 img(
حاشیه: 20 پیکسل
حاشیه: 5px جامد #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2)؛
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2)؛
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: همه 0.5s ease-out.
-moz-transition: همه 0.5s ease.
-o-transition: همه 0.5s ease.
}

#ex4 img: شناور (
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. محو شدن و بازتاب

نسخه ی نمایشی:برای مشاهده

اجرای این افکت کمی مشکل است، بنابراین مجبور شدیم کمی با آن کمانچه بپردازیم تا به کار بیفتیم. موقعیت پیش فرض تصویر کمی شفاف است. سپس، هنگامی که ماوس را روی تصویر می‌چرخانید، سطح شفافیت کاهش می‌یابد و تصویر به ظاهر اولیه‌اش باز می‌گردد، همچنین درخشش و انعکاس جزئی (فقط برای مرورگرهای خانواده WebKit) باز می‌گردد.

متأسفانه، بازتاب دقیقاً یک انتقال نیست، بنابراین بلافاصله ظاهر می شود، حتی اگر بقیه محتوا در حرکت آهسته ظاهر شود.

اگر در مورد بازتاب های CSS گیج شده اید، می توانید در این مقاله (دیوید والش) در مورد آن بیشتر بدانید.

محو شدن و بازتاب کد CSS

#ex5 (
عرض: 700 پیکسل
حاشیه: 0 خودکار;
حداقل ارتفاع: 300 پیکسل
}

#ex5 img(
حاشیه: 25 پیکسل
کدورت: 0.8
حاشیه: 10 پیکسل جامد #eee;

/*انتقال*/
-webkit-transition: همه 0.5 ثانیه سهولت.
-moz-transition: همه 0.5s ease.
-o-transition: همه 0.5s ease.

/*بازتاب*/
-webkit-box-reflect: زیر 0px -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(شفاف)، color-stop(.7، شفاف)، به (rgba(0،0،0،0.1)) )
}

#ex5 img: شناور (
کدورت: 1

/*بازتاب*/
-webkit-box-reflect: زیر 0px -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، from(شفاف)، color-stop(0.7، شفاف)، به (rgba(0،0،0،0.4)) )

/*درخشش*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8)؛
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8)؛
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
نتیجه

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

اگر در جایی از شبکه با جلوه های چشم نواز دیگری برخورد کرده اید، لطفاً در مورد آن به ما و سایر خوانندگان بگویید.

پست شامل مجموعه ای از افکت های مختلف و انیمیشن های CSS، که می تواند در کار شما مفید باشد و همچنین نیاز به استفاده مداوم از جاوا اسکریپت را از بین ببرد. شاید نمونه ها جدیدترین و غیرعادی ترین نباشند، اما به نظر من مفید هستند.

1. ساعت CSS3 با جی کوئری

این ساعت با استفاده از یکی از ابزارهای اصلی CSS3 - چرخش و با گنجاندن کتابخانه jQuery ایجاد شده است.

2. ساعت آنالوگ CSS

کلاسیک تر، ساعت آنالوگ. آنها با استفاده از انتقال وب کیت و ویژگی transform CSS ایجاد می شوند. اما برای اینکه زمان با زمان فعلی مطابقت داشته باشد، به جاوا اسکریپت نیاز دارید.

3. چرخش مکعب سه بعدی

چرخش و حرکت در امتداد دو طرف مکعب با کلیدهای استاندارد "بالا"، "پایین"، "چپ" و "راست" انجام می شود. خود شکل سه بعدی با استفاده از webkit-perspective، -webkit-transform و -webkit-transition ساخته شده است.

4. چند مکعب سه بعدی جمع شونده

در اینجا چندین مکعب سه بعدی با استفاده از CSS3 و ویژگی های تبدیل و انتقال به طور مستقیم وجود دارد. نگه داشتن ماوس بر روی مکعب باعث می شود که به طرفین حرکت کند و متنی که در سمت دیگر شکل است نمایان شود.

5. منوی آکاردئون

افکت منوی آکاردئونی CSS خالص، جایی که با کلیک بر روی هر یک از ردیف ها، یک پنجره اضافی در بدنه خود لیست باز می شود. انیمیشن بومی در مرورگرهای مبتنی بر WebKit.

6. CSS Parallax Scrolling

این یک پیمایش منظر خودکار متحرک با استفاده از انتقال CSS بر اساس WebKit است. هنگامی که ماوس را روی کادر متن می‌چرخانید، ستاره‌های پس‌زمینه به آرامی به سمت کنار حرکت می‌کنند. اثر پرواز ایجاد می شود.

7. ماتریس

فیلم کالت «ماتریکس» یکی از بهترین فیلم های علمی تخیلی است. مثال نشان می دهد که چگونه می توان همان انیمیشن شگفت انگیز (صفحه سیاه با اعداد در حال اجرا) را در CSS3 بازسازی کرد.

8 پالاروید پویا

در این مثال، توصیف همراه با جزئیاتایجاد عکس های متحرک بر اساس دستورات CSS3. با کلیک بر روی یک تصویر آن را بزرگ کرده و به جلو می‌آورد.

9. مقیاس بندی تصویر

در این مثال، تصاویر به سادگی با شناور بزرگنمایی می شوند. یک اثر ساده، اما گاهی اوقات بسیار مفید.

10. جلوه های جاوا اسکریپت در CSS3

به عنوان جایگزینی برای جاوا اسکریپت، این پست هفت افکت CSS3 را پیشنهاد می کند: بلوک های مختلفی که می چرخند، ناپدید می شوند، خارج می شوند، رشد می کنند و غیره.

11. DJ Hero Virtual Records

این پست نحوه ایجاد رکوردهای چرخشی را توضیح می دهد. سرعت چرخش را می توان مستقیماً روی صفحه تنظیم کرد.

12. وینیل کشویی

افکت ضبط وینیل کشویی با استفاده از انتقال‌های CSS3 و HTML ایجاد می‌شود. انیمیشنی مانند این یک صفحه وب را زنده می کند، به یک جلد آلبوم استاندارد اصالت می بخشد و غیره.

13. جلوه های شناور تصویر

هنگامی که ماوس را روی یک تصویر می‌چرخانید، می‌تواند به طرفین حرکت کند، بچرخد، کاهش یابد، از مربعی به گرد تبدیل شود، تار شود... در یک کلام، عکس‌ها ویژگی‌های خود را به هر شکل ممکن تغییر می‌دهند.

14. مثلث دوار

وقتی روی مثلث کلیک می کنید، شروع به چرخش می کند.

15. فضا

فضای کامل، متناسب با CSS. به عنوان نمونه ای از همپوشانی لایه های چرخان عمل می کند (در هنگام بزرگنمایی در مرورگر بیشتر قابل توجه است).

16. Las Meninas به صورت سه بعدی

یک افکت CSS جالب که Las Meninas معروف Diego Velázquez را سه بعدی جلوه می دهد.

17. CSS برای Mac OS X

در پایین صفحه مجموعه ای از آیکون های اصلی Mac OS X وجود دارد که با شناور بزرگ می شوند. افکت به سایت پویایی می دهد.

18. دراپ در مدال

جلوه‌های CSS3 و ویژگی‌های Drop-In Modals به ایجاد سریع، متحرک و تغییر ساده پنجره های مدال.

19. متحرک سازی اشیاء

تحول تغییر می کند ظاهرعنصر در مرورگر در مثال موشکی که از یک سر صفحه به انتهای دیگر "پرواز" می کند نشان داده شده است. می توان از ابزارهای حرکت، چرخش و غیره استفاده کرد.

20. ساعت رنگی

ساعت رنگی بر اساس jQuery و CSS3 است. اثر مشابهدر شرایط انتظار برای اتمام برخی رقابت ها، رای گیری و مواردی از این دست مفید خواهد بود.

21. گالری لایت باکس با جی کوئری و CSS3

این یک گالری فوق العاده است که به شما امکان می دهد تصاویر را به ترتیب انتخابی مرتب و مرتب کنید. برای تعامل، گالری از jQuery، jQuery UI و پلاگین جی کوئریجعبه فانتزی لایت باکس از عنوان و توضیحات تصاویر پشتیبانی می کند، آنها را گروه بندی می کند و به طور خودکار اسلایدها را در یک ردیف مرتب می کند.

22. پیش نمایش "الاستیک".

بزرگنمایی پیش‌نمایش تصویر در شناور. بنابراین، با کلیک بر روی منو به نسبت افزایش می یابد.

23. کارت های پویا

این مثال مجموعه ای پویا از کارت هایی است که استفاده می کنند توابع HTMLو CSS3.

24. منوی کشویی جی کوئری

منوی کشویی در مثال با استفاده از ترکیبی از CSS3 و jQuery ایجاد شده است. هنگامی که ماوس را روی تصویر نگه می دارید، یک پنجره بازشو با متن ظاهر می شود.

25. زبانه های CSS

در مثال، قرار دادن ماوس روی سرفصل‌های برگه، فهرست زیر را تغییر می‌دهد.

26. منوی چشم ماهی

این مثال نحوه ایجاد منوی Fisheye را با استفاده از انیمیشن CSS و SVG نشان می دهد. به عنوان یک امتیاز اضافی، یک SVG دمو در تگ IMG وجود دارد.

27. منوی کشویی

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

28. عنوان هایی از جنگ ستارگان

عناوین معروف جنگ ستارگان. HTML و CSS برای اجرای آنها کافی خواهد بود.

29. جلوه های بیشتر Fisheye CSS

باز هم آیکون هایی که با شناور افزایش می یابند.

30. انیمیشن فریم به فریم

چندین گزینه نمایشی در دسترس است.
در مثال اول، برای تغییر فریم باید روی تصویر کلیک کنید. هر کلیک یک حرکت است. فریم ها تکرار می شوند، یک حلقه مشخص ایجاد می شود.
در مثال دوم برای تغییر فریم کافی است مکان نما را روی تصویر حرکت دهید. بر این اساس، سرعت انیمیشن به سرعت حرکت ماوس بستگی دارد.