作者：犹豫的海波V5_697 | 来源：互联网 | 2023-05-23 19:42
我目前正在学习所有关于CSS的知识,所以我试图生成具有不同功能的不同形状.
我目前正在开发一个项目,该项目需要一个水平箭头来显示交易发生的"进度".
所以我试图生成一个箭头'进度条',如:
|\
| \
+----------------+ \
|XX| 10% >
+----------------+ /
\ | /
\ |/
\the XX's depict a different color.
我目前能够"填充"直到箭头,但是我生成箭头的方式,我似乎也不能"填充"它的排列(即约90%,物理的一半)头应该是满的) - 而不是整个事情.
我目前的片段:
.arrow{
margin:0 auto;
height:100px;
width:200px;
background:red;
margin-top:60px;
position:relative;
/*overflow:hidden;*/
}
.arrow:before, .prog:before{
content:"";
position:absolute;
right:-100px;
border-left:100px solid red;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
top:-50%;
}
.prog{
position:absolute;
height:100%;
width:0%;
background:blue;
transition: all 0.8s;
}
.arrow:hover .prog{
width:100%;
}
.prog:before{
border-left:100px solid transparent;
transition: all 0.8s;
}
.arrow:hover .prog:before{
border-left:100px solid blue;
}
这并没有真正起作用,因为你"看到箭头的身体外面的点",看起来好像另一个箭头出现在它前面,而不是"填满它".
一个小提琴住在这里
我已经使用悬停效果作为演示,虽然我想使用jquery来设置完成百分比
1> Gildas.Tambo..：
您可以仅为.prog元素的宽度设置动画 并将其设置为overlfow: hidden
.prog{
width: 0%;
height:100%;
position: relative;
overflow: hidden;
transition: width 0.8s
}
.arrow:hover .prog{
width: 300px;
}
.arrow{
height:200px;
margin:0 auto;
width:300px;
position:relative;
margin-top:60px;
}
.arrow,.arrow:before,.arrow:after{
z-index:1
}
.prog,.prog:before,.prog:after{
z-index:2
}
.arrow:before, .prog:before,
.arrow:after, .prog:after{
content:"";
position:absolute;
}
.arrow:before, .prog:before{
left: 200px;
top: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
.arrow:after, .prog:after{
margin: 0 auto;
height: 100px;
width: 200px;
top: 50px;
left: 0
}
.arrow:before{
border-left: 100px solid red
}
.arrow:after{
background: red
}
.prog:before{
border-left: 100px solid blue
}
.prog:after{
background: blue
}
京公网安备 11010802041100号