css - 如何增加进度条中方形/圆形块的大小？增加宽度，高度不起作用
问题描述
我尝试更新边界半径以从圆形制作正方形，但尺寸非常小。我想增加每个正方形的大小。宽度和高度的变化没有任何区别。
如果有人可以帮助使其可用或提供带有大盒子的类似代码。让我知道是否需要任何进一步的细节。
@-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 100%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
@media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
} <head>
<meta charset="UTF-8"/>
<title>Responsive Checkout Progress Bar</title>
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1>Responsive Checkout Progress Bar</h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first"><a href="#">Possible candidate</a></li>
<li class="previous visited">Forwarded to manager</li>
<li class="active">Phone screen</li>
<li class="next">Interview</li>
<li class="">Complete</li>
<li class="">Cancelled</li>
</ul>
</div>
</body>解决方案
在小屏幕上您需要调整 @media all and (min-width: 800px) { ... ul.checkout-bar li:before ... }班级的属性，在大屏幕上您需要调整ul.checkout-bar li:before，
您需要调整的属性是: height, width, line-height,top
@-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 100%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 20px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
margin-top: 26px;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 20%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 0px;
line-height: 70px;
height: 70px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: -80px;
width: 70px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
@media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 70px;
left: 40%;
line-height: 70px;
position: absolute;
top: -80px;
width: 70px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
} <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'/>
<h1>Responsive Checkout Progress Bar</h1>
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first"><a href="#">Possible candidate</a></li>
<li class="previous visited">Forwarded to manager</li>
<li class="active">Phone screen</li>
<li class="next">Interview</li>
<li class="">Complete</li>
<li class="">Cancelled</li>
</ul>
</div>推荐阅读
- actions-on-google - 是否可以在 Google Assistant Offline 的 Actions 中运行我的测试应用程序？
- google-chrome - Chrome 中的虚假地理位置
- c# - 带有 semaphoreSlim 的模式 WaitAllOneByOne，这个实现线程安全吗？
- javascript - 更新 Javascript 对象中的函数调用
- jquery - Datatable 正在工作，但在单击页面时重定向到未定义的页面
- ios - 在核心数据中存储整数数组的最佳方法（用户决定数组的长度）
- r - 通过查找表将特定数据类型映射到特定列
- python - 来自另一个列表的字符串中的单词数
- r - MASS::mvrnorm：参数“Sigma”的对角线是方差还是标准差？
- python - 为什么在python中会这样？