طراحی نوار وضعیت حبابی(قسمت دهم)

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

گام شماره ی 1:

برای ایجاد انیمیشن، ابتدا به عنصر با کلاس water. کدهای رنگی CSS زیر را اضافه می کنیم: 

.green .progress .inner .water {
 position: absolute;
 z-index: 1;
 width: 200%;
 height: 200%;
 background: rgba(83,252,83,0.5);
 top: 25%;
 left: -50%;
 border-radius: 40%;
 
 box-shadow: 0 0 20px #03bc03;
 
 animation-name: spin;
 -webkit-animation-name: spin;
 
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;
 
 animation-timing-function: linear;
 -webkit-animation-timing-function: linear;
 
 animation-duration: 10s;
 -webkit-animation-duration: 10s;
 
}

 در کدهای رنگی شده ی بالا، ابتدا از ویژگی box-shadow استفاده کرده ایم و به عنصر با کلاس water. به اندازه ی 20 پیکسل، سایه ای به رنگ متمایل به سبز را اضافه کرده ایم. 

سپس با استفاده از ویژگی animation-name نام انیمیشن خود را spin گذاشته ایم. که بعدا از آن استفاده خواهیم نمود. 

سپس با استفاده از ویژگی animation-iteration-count تعداد تکرار انیمیشن را مشخص کرده ایم و آن را برابر با مقدار infinite ( بی نهایت) قرار داده ایم تا همواره این انیمیشن اجرا شود. 

حالا با استفاده از ویژگی animation-timing-function ، سرعت انیمیشن در شروع و پایان را برابر با مقدار linear قرار داده ایم. که باعث می شود سرعت انیمیشن ما در شروع و پایان هر دوره، یکی باشد. 

سپس با استفاده از ویژگی animation-duration مشخص کردیم که هر دوره از اجرای انیمیشن ما، به اندازه ی 10 ثانیه طول بکشد. 

 گام شماره ی 2: 

 اکنون می خواهیم با استفاده از قانون keyframe انیمیشن خود را تعریف کنیم، بنابراین کدهای رنگی زیر را در انتهای کدهای CSS خود قرار می دهیم: 

@keyframes spin {
 from {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 
 }
}



@-webkit-keyframes spin {
 from {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 
 }
 to {
 transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 
 }
}

 در کدهای آبی رنگ بالا، در داخل کدهای بخش from، تعیین می کنیم که برای انیمیشن spin، عمل rotate یا همان چرخش از زاویه ی 0 درجه انجام شود. و سپس در بخش to تعیین کردیم که چرخش ما تا زاویه ی 360 درجه ادامه داشته باشد. 

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

مشاهده ی نتیجه:

در خودتان امتحان کنید زیر، به راحتی می توانید نتیجه ی حاصل شده را مشاهده کنید:

See the Pen 2.9نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

 برای مشاهده ی نتیجه به صورت تمام صفحه، اینجا کلیک کنید. 

گام شماره ی 3: 

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

.green .progress .inner .percent {
 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 
 /*border:1px solid red;*/
 
 color: #03c603;
 font-size: 92px;
 font-weight: bold;
 
 text-align: center;
 
 text-shadow: 0 0 10px #029502;
 
 line-height: 240px;
 
}

حالا برای اینکه مقدار سرریز شده از مستطیل متحرک در داخل دایره ها را از دید ناظر محو کنیم، از دستور overflow استفاده می کنیم و مقدار hidden را به آن می دهیم: 

.green .progress .inner {
 
 width: 240px;
 height: 240px;
 
 /*background-color: blue;*/
 
 border: 5px solid #1a1a1a;
 
 border-radius: 50%;
 
 z-index: 2;
 position: absolute;
 
 overflow:hidden;
 
}

مشاهده ی نتیجه: 

در خودتان امتحان کنید زیر می توانید نتیجه ی حاصل شده را به خوبی مشاهده کنید: 

See the Pen 2.10نوار وضعیت حبابی by Ehsan Abbasi (@sbaloot) on CodePen.

• قبلی
• بعدی