0
我面臨着CSS一些困難，我想這樣做以下的事情：每一次進步 引導進度條CSS Issuse
- 刪除間距刪除進度條的厚度
總體而言，像每一個進度條之間的這種效果只進度條的厚度和空間
https://i.stack.imgur.com/Z3Y0P.jpg
使用下面的代碼：
jQuery(document).ready(function ($) {
$('.skillbar').each(function() {
$(this).find('.skillbar-bar').animate({
width: $(this).attr('data-percent')
}, 1500);
});
$(".skillbar-title em").html(function(index, old) {
return old.replace(/(\b\w+)$/, '<span>$1</span>');
});
});.skillbar {
\t position: relative;
\t display: block;
\t margin-top: 50px;
\t margin-bottom: 20px;
\t width: 100%;
\t background: #ddd;
\t height: 42px;
\t border-radius: 2px;
\t -moz-border-radius: 2px;
\t -webkit-border-radius: 2px;
\t -webkit-transition: 0.4s linear;
\t -moz-transition: 0.4s linear;
\t -ms-transition: 0.4s linear;
\t -o-transition: 0.4s linear;
\t transition: 0.4s linear;
\t -webkit-transition-property: width, background-color;
\t -moz-transition-property: width, background-color;
\t -ms-transition-property: width, background-color;
\t -o-transition-property: width, background-color;
\t transition-property: width, background-color;
}
.skillbar-title {
\t position: absolute;
\t top: 0;
\t left: 0;
\t font-weight: bold;
\t font-size: 13px;
\t color: #333;
\t background: #6adcfa;
\t -webkit-border-top-left-radius: 2px;
\t -webkit-border-bottom-left-radius: 2px;
\t -moz-border-radius-topleft: 2px;
\t -moz-border-radius-bottomleft: 2px;
\t border-top-left-radius: 2px;
\t border-bottom-left-radius: 2px;
}
.skillbar-title em {
\t font-size: 14px;
\t font-style: italic;
\t font-weight: normal;
\t color: #999;
\t text-transform: lowercase;
\t position: relative;
\t margin-top: -35px;
\t display: block;
\t height: 15px;
\t line-height: 25px;
\t -webkit-border-top-left-radius: 2px;
\t -webkit-border-bottom-left-radius: 2px;
\t -moz-border-radius-topleft: 2px;
\t -moz-border-radius-bottomleft: 2px;
\t border-top-left-radius: 2px;
\t border-bottom-left-radius: 2px;
}
.skillbar-bar {
\t height: 42px;
\t width: 0px;
\t -webkit-border-top-left-radius: 2px;
\t -webkit-border-bottom-left-radius: 2px;
\t -moz-border-radius-topleft: 2px;
\t -moz-border-radius-bottomleft: 2px;
\t border-top-left-radius: 2px;
\t border-bottom-left-radius: 2px;
}
.skillbar-percent {
\t position: absolute;
\t right: 10px;
\t top: 0;
\t font-size: 12px;
\t height: 42px;
\t line-height: 42px;
\t color: #444;
\t color: rgba(0, 0, 0, 0.4);
}
.no-percent .skillbar-percent {
\t display: none;
}
.skillbar-title em span {
\t color: #333;
\t font-style: normal;
\t text-transform: uppercase;
\t letter-spacing: 1px;
\t margin-left: 3px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>
<div class="skillbar" data-percent="50%">
<div class="skillbar-title" style="background: #3498db;"><em>HTML</em></div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skillbar-percent">50%</div>
</div>
<br />
<div class="skillbar" data-percent="60%">
<div class="skillbar-title" style="background: #2ecc71;"><em>CSS</em></div>
<div class="skillbar-bar" style="background: #2ecc71;"></div>
<div class="skillbar-percent">60%</div>
</div>
<br />
<div class="skillbar" data-percent="80%">
<div class="skillbar-title" style="background: #9b59b6;"><em>PHP</em></div>
<div class="skillbar-bar" style="background: #9b59b6;"></div>
<div class="skillbar-percent">80%</div>
</div>
<br />
<div class="skillbar" data-percent="90%">
<div class="skillbar-title" style="background: #e74c3c;"><em>JQUERY</em></div>
<div class="skillbar-bar" style="background: #e74c3c;"></div>
<div class="skillbar-percent">90%</div>
</div>