相关疑难解决方法(0)

使用 CSS3 反转进度条

我有这个例子。

我想将进度条反转 180 度以从右向左前进。要获得这样的东西：

在此处输入图片说明

我试图改变过渡属性，但没有结果。

代码：

.progress-bar span {
        display: inline-block;
        height: 100%;
        background-color: #777;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        transition: width .4s ease-in-out;      
}

Run Code Online (Sandbox Code Playgroud)

javascript css jquery

Mil*_*ils

2013 04-15

4
推荐指数

1
解决办法

4539
查看次数

如何让进度条从右向左过渡而不是从左向右？

我尝试在 .skill_item_colored_main_wrap 部分中添加“float:right”。但它变得如此混乱。我认为这与 -webkit-animation 部分有关。我该如何修改它，使其从右向左传输？

.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 …

Run Code Online (Sandbox Code Playgroud)

html css

use*_*741

lucky-day

3
推荐指数

1
解决办法

2864
查看次数