卡片内条的进度
The progress of the strip inside the card
我在网上看到过这些进度条,我希望我的卡片中的每个“细节”都有相同的进度条,但我不知道如何实现它。
我无法想象这怎么能用ul打包。也许你知道另一种方式。如果你知道,我需要你的帮助。
下面我附上了卡片的标记代码和样式。
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* .flip-card-container */
.flip-card-container {
--hue: 150;
--primary: hsl(var(--hue), 50%, 50%);
--white-1: hsl(0, 0%, 90%);
--white-2: hsl(0, 0%, 80%);
--dark: hsl(var(--hue), 25%, 10%);
--grey: hsl(0, 0%, 50%);
width: 310px;
height: 500px;
margin: 40px;
perspective: 1000px;
}
/* .card-... */
.card-front{
width: 100%;
height: 100%;
border-radius: 24px;
background: var(--dark);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* ul */
ul {
padding-top: 50%;
margin: 0 auto;
width: 70%;
height: 100%;
list-style: none;
color: var(--white-1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* li */
li {
width: 100%;
margin-top: 12px;
padding-bottom: 12px;
font-size: 14px;
text-align: center;
position: relative;
}
li:nth-child(2n) {
color: var(--white-2);
}
li:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
opacity: .2;
}
<div class="flip-card-container" style="--hue: 220">
<div class="flip-card">
<div class="card-front">
<ul>
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
<li>Detail 4</li>
<li>Detail 5</li>
</ul>
</div>
</div>
</div>
请立即停止在我的每个主题的底部:(
不知道为什么进度标签在 windows 7 上看起来很难看,你可以像其他任何东西一样设置它的样式 - 但知道你不想使用它,你可以用几个来模拟它div 并将内部的宽度设置为您的进度百分比
绝对给进度条的样式再一次机会,网上有很多指南
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* .flip-card-container */
.flip-card-container {
--hue: 150;
--primary: hsl(var(--hue), 50%, 50%);
--white-1: hsl(0, 0%, 90%);
--white-2: hsl(0, 0%, 80%);
--dark: hsl(var(--hue), 25%, 10%);
--grey: hsl(0, 0%, 50%);
width: 310px;
height: 500px;
margin: 40px;
perspective: 1000px;
}
/* .card-... */
.card-front {
width: 100%;
height: 100%;
border-radius: 24px;
background: var(--dark);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* ul */
ul {
padding-top: 50%;
margin: 0 auto;
width: 70%;
height: 100%;
list-style: none;
color: var(--white-1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* li */
li {
width: 100%;
margin-top: 12px;
padding-bottom: 12px;
font-size: 14px;
text-align: center;
position: relative;
}
li:nth-child(2n) {
color: var(--white-2);
}
li:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
opacity: .2;
}
.progress-bar {
width: 100%;
padding: 5px 5px;
border-radius: 10px;
background-color: #2a2a2a;
margin-top: 10px;
}
.progress-bar .progress-inner {
height: 5px;
border-radius: 5px;
background-color: #a57eef;
}
progress {
padding: 5px;
}
progress[value] {
width: 100%;
padding: 5px;
}
<div class="flip-card-container" style="--hue: 220">
<div class="flip-card">
<div class="card-front">
<ul>
<li>
Detail 1
<div class="progress-bar">
<div class="progress-inner" style="width: 47%;" />
</div>
</li>
<li>Detail 2
<div class="progress-bar">
<div class="progress-inner" style="width: 17%;" />
</div>
</li>
<li>Detail 3
<div class="progress-bar">
<div class="progress-inner" style="width: 69%;" />
</div>
</li>
<li>Detail 4
<div class="progress-bar">
<div class="progress-inner" style="width: 5%;" />
</div>
</li>
<li>Detail 5
<div class="progress-bar">
<div class="progress-inner" style="width: 95%;" />
</div>
</li>
</ul>
</div>
</div>
</div>
我在网上看到过这些进度条,我希望我的卡片中的每个“细节”都有相同的进度条,但我不知道如何实现它。
我无法想象这怎么能用ul打包。也许你知道另一种方式。如果你知道,我需要你的帮助。
下面我附上了卡片的标记代码和样式。
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* .flip-card-container */
.flip-card-container {
--hue: 150;
--primary: hsl(var(--hue), 50%, 50%);
--white-1: hsl(0, 0%, 90%);
--white-2: hsl(0, 0%, 80%);
--dark: hsl(var(--hue), 25%, 10%);
--grey: hsl(0, 0%, 50%);
width: 310px;
height: 500px;
margin: 40px;
perspective: 1000px;
}
/* .card-... */
.card-front{
width: 100%;
height: 100%;
border-radius: 24px;
background: var(--dark);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* ul */
ul {
padding-top: 50%;
margin: 0 auto;
width: 70%;
height: 100%;
list-style: none;
color: var(--white-1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* li */
li {
width: 100%;
margin-top: 12px;
padding-bottom: 12px;
font-size: 14px;
text-align: center;
position: relative;
}
li:nth-child(2n) {
color: var(--white-2);
}
li:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
opacity: .2;
}
<div class="flip-card-container" style="--hue: 220">
<div class="flip-card">
<div class="card-front">
<ul>
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
<li>Detail 4</li>
<li>Detail 5</li>
</ul>
</div>
</div>
</div>
请立即停止在我的每个主题的底部:(
不知道为什么进度标签在 windows 7 上看起来很难看,你可以像其他任何东西一样设置它的样式 - 但知道你不想使用它,你可以用几个来模拟它div 并将内部的宽度设置为您的进度百分比
绝对给进度条的样式再一次机会,网上有很多指南
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* .flip-card-container */
.flip-card-container {
--hue: 150;
--primary: hsl(var(--hue), 50%, 50%);
--white-1: hsl(0, 0%, 90%);
--white-2: hsl(0, 0%, 80%);
--dark: hsl(var(--hue), 25%, 10%);
--grey: hsl(0, 0%, 50%);
width: 310px;
height: 500px;
margin: 40px;
perspective: 1000px;
}
/* .card-... */
.card-front {
width: 100%;
height: 100%;
border-radius: 24px;
background: var(--dark);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* ul */
ul {
padding-top: 50%;
margin: 0 auto;
width: 70%;
height: 100%;
list-style: none;
color: var(--white-1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* li */
li {
width: 100%;
margin-top: 12px;
padding-bottom: 12px;
font-size: 14px;
text-align: center;
position: relative;
}
li:nth-child(2n) {
color: var(--white-2);
}
li:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
opacity: .2;
}
.progress-bar {
width: 100%;
padding: 5px 5px;
border-radius: 10px;
background-color: #2a2a2a;
margin-top: 10px;
}
.progress-bar .progress-inner {
height: 5px;
border-radius: 5px;
background-color: #a57eef;
}
progress {
padding: 5px;
}
progress[value] {
width: 100%;
padding: 5px;
}
<div class="flip-card-container" style="--hue: 220">
<div class="flip-card">
<div class="card-front">
<ul>
<li>
Detail 1
<div class="progress-bar">
<div class="progress-inner" style="width: 47%;" />
</div>
</li>
<li>Detail 2
<div class="progress-bar">
<div class="progress-inner" style="width: 17%;" />
</div>
</li>
<li>Detail 3
<div class="progress-bar">
<div class="progress-inner" style="width: 69%;" />
</div>
</li>
<li>Detail 4
<div class="progress-bar">
<div class="progress-inner" style="width: 5%;" />
</div>
</li>
<li>Detail 5
<div class="progress-bar">
<div class="progress-inner" style="width: 95%;" />
</div>
</li>
</ul>
</div>
</div>
</div>