ساخت باکس انیمیشن با HTML و CSS

  1. Home
  2. برنامه نویسی
  3. جزئیات نویسنده
ساخت باکس انیمیشن با HTML و CSS

ساخت باکس انیمیشن با HTML و CSS

در این آموزش به طراحی و ساخت باکس انیمیشن دار به کمک کد های HTML و CSS پرداخته ایم.
شما می توانید کد های این انیمیشن را از انتهای همین مطلب دانلود نمایید.
مراحل ساخت این انیمیشن به شرح زیر می باشد :

  1. ابتدا یک صفحه HTML ساخته و تگ های زیر را در آن می نویسیم :
    باکس اولیه و بیرونی یک DIV می باشد
    داخل آن DIV به ساخت یک SVG می پردازیم
    درون این SVG یک RECT و تگ های H1 و SPAN را طبق کد ها طراحی میکنیم.
  2. Class ها را برای هر یک از بخش های بالایی نامگذاری می کنیم.
  3. یک فایل CSS ساخته و آن را به HTML لینک می نماییم.
  4. کد های CSS را مطابق ویدئو می نویسیم.

 

 

 

ساخت باکس انیمیشن با اندازه دل خواه

این موضوع را نیز باید مورد بحث قرار دهیم که اندازه این باکس را می توان تغییر داد؟ آیا می توان نوشته آن را به شکل دیگری طراحی نمود ؟ در جواب به تمام این سوال ها می توان گفت بله، در صورتی که نیاز به نغییر اندازه باکس دارید کافیست تا مقدار متغیر های width و height را تغییر دهید. اگر نیاز دارید تا در هنگام اجرای انیمیشن هیچ تغییری در نوشته شما رخ ندهد یا حتی فاصله بین کلمات بیشتر و یا کمتر از مقدار تعیین شده باشد، کافیست تا کد بخش انتهایی CSS را ترمیم نمایید و مقدار margin-left که در انتهای کد های CSS قرار دارد را تغییر دهید.

رنگ های به کار رفته در animation box

رنگ های موجود در این animation box با کد های هگزا دسیمال طراحی شده اند، این نوع رنگ ها را می توانید از وبسایت های انلاین مختلف به دست بیاورید یا حتی از داخل فتوشاپ کد آن را استخراج نمایید همچنین می توانید رنگ های به اصطلاح HEX را از اینجا نیز استخراج نمایید، اما اگر قادر به استفاده از این نوع رنگ ها نمی باشید می توانید از فرمول RGB() استفاده نمایید، این نوع رنگ نیز دارای سه عدد داخل پرانتز می باشد که به راحتی اعداد آن از داخل paint نیز قابل استخراج می باشد.

لینک های دانلود :

لینک دانلود کد های مربوط به این آموزش

تگ ها : CSS HTML

alireza pargol

نویسنده از: 

توسعه دهنده php

دیدگاه خود را بنویسید