close
تبلیغات در اینترنت
آموزش ساخت نوار پیشرفت ,آموزش ساخت نوار مهارت,آموزش ساخت Skill Bar,کد
صفحه اصلی پرشین استک

{ پرشین استک }

به دنیای برنامه نویسی خوش آمدید
|


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


تعداد مطالب :
142


تعداد توسعه دهندگان :
11


تاریخ امروز :
سه شنبه 04 اردیبهشت 1397

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


×

لیست سوالات من

افزودن

چگونه یک برای سایت یا وبلاگ خود یک نوار مهارت (Skill Bar) انیمیشن دار بسازیم ؟

می خواهم نوار مهارتی بسازم که درصد مهارت من را نشان دهد . همچنین دارای انیمیشن باشد .

 

پاسخ :

تنها با استفاده از کد های HTML و CSS می توانید نوار مهارت را بسازید .

مرحله ی اول ) ابتدا کد های CSS را به منظور استایل دهی به نوار و همچنین ایجاد انیمیشن برای آن ، بین دو تگ <style> و <style/> موجود در بخش head صفحه وارد کنید :

 

/* Make sure that padding behaves as expected */
* {box-sizing:border-box}

/* Container for skill bars */
.container {
    width: 100%; /* Full width */
    background-color: #ddd; /* Grey background */
}

.skills {
    text-align: right; /* Right-align text */
    padding-right: 20px; /* Add some right padding */
    line-height: 40px; /* Set the line-height to center the text inside the skill bar, and to expand the height of the container */
    color: white; /* White text color */
}

.html {width: 90%; background-color: #4CAF50;} /* Green */

 

مرحله ی دوم ) سپس کد های HTML را در بخش body صفحه وارد کنید :

 

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

 

برای ایجاد انیمیشن کد های زیر را به بخش CSS وارد کنید :

 

@keyframes anim {
    from { width:1%; }
    to { width:90%;}
}

 

کد های زیر را در بلوک html. وارد کنید :

 

animation-name: anim;
animation-duration: 5s;

 

صفحه اصلی

23

17 / 05 / 1396

PERSIAN STACK


دانلود تمامی API های اندروید

ادامه مطلب

689

چرا گاهی اوقات API موقعیت مکانی سرویس گوگل پلی ، موقعیت مکانی اشتباهی را برمی گرداند ؟

ادامه مطلب

651

چگونه نرم افزار ضبط صدای اندرویدی بسازیم ؟

ادامه مطلب

551

چرا TextView کلمات را با حروف می شکند ؟

ادامه مطلب

513

چگونه Google API برای سطح API 25 را پیدا کنیم ؟

ادامه مطلب

383

چرا وبسایت تجارت الکترونیک Magento 2 در Webview اندروید کار نمی کند ؟

ادامه مطلب

383

دانلود پروژه نمایش جستجوی کتاب برای اندروید

ادامه مطلب

347

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

273

دانلود کتابخانه Retrofit برای اندروید + پروژه

ادامه مطلب

269

دانلود سورس کد بازی اندرویدی Klooni 1010! + فایل APK

ادامه مطلب

261

در تکمیل خودکار اندروید ، دلیل dispatchProvideAutofillStructure() not laid out چیست ؟

ادامه مطلب

247

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

245

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

243

چگونه ارور com.bumptech.glide.Registry$NoModelLoaderAvailableException: Failed to find any ModelLoaders را در اندروید رفع کنیم ؟

ادامه مطلب

209

دانلود سورس کد اپلیکیشن هواشناسی برای اندروید + فایل APK

ادامه مطلب

199

دانلود سورس کد اپلیکیشن اسکنر بارکد برای اندروید + فایل APK

ادامه مطلب

157

دانلود سورس کد تمامی نسخه های تلگرام + فایل های نصبی

ادامه مطلب

155

آموزش استفاده از دیتابیس آماده در پروژه اندرویدی

ادامه مطلب

149

دانلودسورس کد اپلیکیشن موزیک پلیر برای اندروید + فایل APK

ادامه مطلب

143

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

143

دانلود اسکریپت جاوای PS-CH# - ایجاد ورودی متنی پیشرفته

ادامه مطلب

یکشنبه 05 آذر 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

یکشنبه 21 آبان 1396

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

یکشنبه 21 آبان 1396

قسمت شانزدهم - جدول ها در HTML

ادامه مطلب

شنبه 20 آبان 1396

دانلود تمامی نسخه های gradle برای اندروید

ادامه مطلب

شنبه 20 آبان 1396

قسمت پانزدهم - عکس ها در HTML

ادامه مطلب

جمعه 19 آبان 1396

قسمت چهاردهم - لینک ها در HTML

ادامه مطلب

یکشنبه 14 آبان 1396

آموزش ساخت و شخصی سازی Navigation Drawer در اندروید استودیو

ادامه مطلب

یکشنبه 14 آبان 1396

قسمت سیزدهم - CSS در HTML

ادامه مطلب

شنبه 13 آبان 1396

قسمت بیست و پنجم (قسمت آخر) - آموزش ساخت بازی حدس

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و چهارم - آموزش نحوه ی پردازش فایل ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و سوم - برنامه تکمیلی جاوا (6)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و دوم - معرفی آرایه ها در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیست و یکم - برنامه تکمیلی جاوا (5)

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت بیستم - معرفی مفهوم وراثت در جاوا

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت نوزدهم - برنامه تکمیلی جاوا (4)

ادامه مطلب

پنجشنبه 11 آبان 1396

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

ادامه مطلب

پنجشنبه 11 آبان 1396

قسمت هفدهم - برنامه تکمیلی جاوا (2-3)

ادامه مطلب

چهارشنبه 10 آبان 1396

چگونه در برنامه نویسی اندروید ، یک ListView با متن و عکس بسازیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

چگونه در برنامه نویسی اندروید از فونت شخصی خود استفاده کنیم ؟

ادامه مطلب

سه شنبه 09 آبان 1396

قسمت هفدهم - لیست ها در HTML

ادامه مطلب

چگونه می توان با استفاده از CSS ، رنگ placeholder را تغییر داد ؟

ادامه مطلب

قسمت سیزدهم - CSS در HTML

ادامه مطلب

جلسه ی هشتم - استایل در HTML

ادامه مطلب

چرا زمانی که با استفاده از cordova در اندروید 7.0 ، اس ام اس ارسال می کنیم ، با اثتثنای (Exception) امنیتی مواج

ادامه مطلب

آیا راهی برای یافتن تغیرات ماه در نمای تقویم اندروید (calendar view) وجود دارد ؟

ادامه مطلب

چگونه می توان برای وبسایت / وبلاگ ، منویی ساخت که روی تمام دستگاه ها قابل نمایش باشد ؟

ادامه مطلب

چگونه می توان نوار Toast برای وبسایت / وبلاگ ساخت ، طوری که بتوان از آن جهت نمایش هشدار استفاده کرد ؟

ادامه مطلب

چگونه می توان با استفاده از HTML و CSS یک Tooltip شخصی سازی شده ساخت ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک فیلتر لیست یا Filter List بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود یک گالری عکس یا Lightbox بسازیم ؟

ادامه مطلب

چگونه می توانم فرم های رزبلاگ را شخصی سازی کنم ؟

ادامه مطلب

چگونه یک مدل ایمیج (Modal Image) برای وبسایت یا وبلاگ خود طراحی کنیم ؟

ادامه مطلب

چگونه یک مدل باکس برای وبسایت یا وبلاگ خود بسازیم ؟

ادامه مطلب

چگونه یک بخش کد (Code Panel) برای وبسایت یا وبلاگ خود بسازیم ؟

ادامه مطلب

چگونه با html و css یک دکمه سه بعدی و انیمیشن دار بسازیم ؟

ادامه مطلب

چگونه برای سایت یا وبلاگ خود ، اسلاید شو بسازیم ؟

ادامه مطلب

× برای نظر گذاشتن یا پاسخ دادن به سوالات باید در سایت عضو باشید !

برای حمایت از ما روی بنر های زیر کلیک کنید .

برای سفارش تبلیغات به ما ایمیل بزنید .

×

ارتباط با ما