如何使进度条从右到左而不是从左到右转换？

时间：2015-02-08 04:27:29

标签： html css

我试图放一个＆＃34; float：right＆＃34;在.skill_item_colored_main_wrap部分。但它变得如此混乱。我认为它与-webkit-animation部分有关。 我怎样才能修改它以便从右到左过渡？

＆＃13;
＆＃13; 
.shortcode_skill {
	position:relative;
	overflow:hidden;
}

.shortcode_skill:before {
	position:absolute;
	top:0;
	left:27%;
	margin:15px 0 0;
	width:1px;
	height:95%;
	background:rgba(0, 0, 0, .1);
	content:"";
}

.skill_item {
	overflow:hidden;
	width:100%;
}

.skill_item > span {
	float:left;
	padding:24px 4.7% 0 0;
	width:25%;
	text-align:right;
}

.skill_item_colored_main_wrap {
	float:left;
	padding:15px 0 5px;
	width:70%;
}

.skill_item_colored_wrap {
	position:relative;
	height:33px;
}

.skill_item_colored {
	position:absolute;
	width:100%;
	height:100%;
	-webkit-animation:move 2s linear .1s normal none 1 ;
	-moz-animation:move 2s linear .1s normal none 1 ;
	-ms-animation:move 2s linear .1s normal none 1 ;
	-o-animation:move 2s linear .1s normal none 1 ;
	animation:move 2s linear .1s normal none 1 ;
}

@-webkit-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@-ms-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@-o-keyframes move {
	from {width:0;}
	to {width:100%;}
}

@keyframes move {
	from {width:0;}
	to {width:100%;}
}

.skill_item_colored_wrap > span {
	position:relative;
	display:block;
}

.skill_item_colored > span {
	display:block;
	padding:8px 10px;
	text-align:right;
	-webkit-animation:opacity 2.5s linear .1s normal none 1 ;
	-moz-animation:opacity 2.5s linear .1s normal none 1 ;
	-ms-animation:opacity 2.5s linear .1s normal none 1 ;
	-o-animation:opacity 2.5s linear .1s normal none 1 ;
	animation:opacity 2.5s linear .1s normal none 1 ;
}

@-webkit-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-moz-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-ms-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@-o-keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}

@keyframes opacity {
	0% {opacity:0;}
	90% {opacity:0;}
	100% {opacity:1;}
}
＆＃13; 
<div class="skill_item">
<span>hello world </span>
<div class="skill_item_colored_main_wrap">
<div class="skill_item_colored_wrap" style="width:95%;">
<div class="skill_item_colored" style="background-color:#f97a14;">
			<span>95%</span>
		    </div>
			</div>
			</div>
			</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

快速简便的方法是旋转父元素180deg，然后将子元素旋转为负-180deg。

假设您希望文本与左侧对齐，我添加了text-align: left。省略如果你想让它与右边对齐。

.skill_item_colored_wrap {
  transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
  text-align: left;
  transform: rotate(-180deg);
}

＆＃13;
＆＃13; 
.skill_item_colored_wrap {
  transform: rotate(180deg);
}
.skill_item_colored_wrap .skill_item_colored > span {
  text-align: left;
  transform: rotate(-180deg);
}

.shortcode_skill {
  position: relative;
  overflow: hidden;
}
.shortcode_skill:before {
  position: absolute;
  top: 0;
  left: 27%;
  margin: 15px 0 0;
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, .1);
  content: "";
}
.skill_item {
  overflow: hidden;
  width: 100%;
}
.skill_item > span {
  float: left;
  padding: 24px 4.7% 0 0;
  width: 25%;
  text-align: right;
}
.skill_item_colored_main_wrap {
  float: left;
  padding: 15px 0 5px;
  width: 70%;
}
.skill_item_colored_wrap {
  position: relative;
  height: 33px;
}
.skill_item_colored {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: move 2s linear .1s normal none 1;
  -moz-animation: move 2s linear .1s normal none 1;
  -ms-animation: move 2s linear .1s normal none 1;
  -o-animation: move 2s linear .1s normal none 1;
  animation: move 2s linear .1s normal none 1;
}
@-webkit-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-ms-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-o-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.skill_item_colored_wrap > span {
  position: relative;
  display: block;
}
.skill_item_colored > span {
  display: block;
  padding: 8px 10px;
  text-align: right;
  -webkit-animation: opacity 2.5s linear .1s normal none 1;
  -moz-animation: opacity 2.5s linear .1s normal none 1;
  -ms-animation: opacity 2.5s linear .1s normal none 1;
  -o-animation: opacity 2.5s linear .1s normal none 1;
  animation: opacity 2.5s linear .1s normal none 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
＆＃13; 
<div class="skill_item">
  <span>hello world </span>
  <div class="skill_item_colored_main_wrap">
    <div class="skill_item_colored_wrap" style="width:95%;">
      <div class="skill_item_colored" style="background-color:#f97a14;">
        <span>95%</span>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

作为替代方案，您还可以在direction: rtl元素上设置.skill_item，然后将.skill_item_colored_main_wrap元素display设置为inline-block并删除float: left：

.skill_item {
  overflow: hidden;
  width: 100%;
  direction: rtl;
}
.skill_item_colored_main_wrap {
  display: inline-block;
}

＆＃13;
＆＃13; 
.skill_item {
  overflow: hidden;
  width: 100%;
  direction: rtl;
}
.skill_item_colored_main_wrap {
  display: inline-block;
}
.shortcode_skill {
  position: relative;
  overflow: hidden;
}
.shortcode_skill:before {
  position: absolute;
  top: 0;
  left: 27%;
  margin: 15px 0 0;
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, .1);
  content: "";
}
.skill_item > span {
  float: left;
  padding: 24px 4.7% 0 0;
  width: 25%;
}
.skill_item_colored_main_wrap {
  padding: 15px 0 5px;
  width: 70%;
}
.skill_item_colored_wrap {
  position: relative;
  height: 33px;
}
.skill_item_colored {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-animation: move 2s linear .1s normal none 1;
  -moz-animation: move 2s linear .1s normal none 1;
  -ms-animation: move 2s linear .1s normal none 1;
  -o-animation: move 2s linear .1s normal none 1;
  animation: move 2s linear .1s normal none 1;
}
@-webkit-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-ms-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-o-keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes move {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.skill_item_colored_wrap > span {
  position: relative;
  display: block;
}
.skill_item_colored > span {
  display: block;
  padding: 8px 10px;
  text-align: right;
  -webkit-animation: opacity 2.5s linear .1s normal none 1;
  -moz-animation: opacity 2.5s linear .1s normal none 1;
  -ms-animation: opacity 2.5s linear .1s normal none 1;
  -o-animation: opacity 2.5s linear .1s normal none 1;
  animation: opacity 2.5s linear .1s normal none 1;
}
@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
＆＃13; 
<div class="skill_item">
  <span>hello world </span>
  <div class="skill_item_colored_main_wrap">
    <div class="skill_item_colored_wrap" style="width:95%;">
      <div class="skill_item_colored" style="background-color:#f97a14;">
        <span>95%</span>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这是另一种选择，

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" style="width:95%%;"></div>
</div>

并将其添加到您的CSS 

.progress-middle .progress-bar {
    position: relative;
}
.progress-right .progress-bar {
    float: right;
}

我们在此处所做的是确保位置为relative，然后将progress-bar向右浮动而不是left。

相关问题
最新问题