...

آموزش افکت هاور در المنتور

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

کد استفاده شده در آموزش افکت هاور در المنتور

.card{     width: 300px;     height: 280px;     box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);     transition: 0.5s; }  .card:hover{     height: 350px; }  .imgBx{     position: absolute;     top: 20px;     right: 25px;     background: #333;     border-radius: 12px;     transition: 0.5s; }  .card:hover .imgBx{     top: -100px;     scale: 0.75;     box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2); }  .content{     position: absolute;     top: 232px;     width: 100%;     padding: 0 30px;     height: 45px;     overflow: hidden;     text-align: center;     transition: 0.5s; }  .card:hover .content{     top: 90px;     height: 260px; }   @media screen and (max-width: 480px){          .card{     width:280px;     height: 350px; }       .imgBx{     top: -100px;     left:0;     scale: 0.7;     box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2); }          .card .content{     top: 90px;     height: 260px; }      }

مدرس: امیر آزادمنش

زمان: 9:32 دقیقه

مشاهده در یوتیوب

مشاهده در آپارات

بفرست برای دوستت:
Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.