纯CSS制作自适应分页条附源码下载

}
.cd-pagination a:active {
/* 点击效果 */
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
.cd-pagination a.disabled {
/* 按钮不可用 */
color: rgba(46, 64, 87, 0.4);
pointer-events: none;
}
.cd-pagination a.disabled::before, .cd-pagination a.disabled::after {
opacity: .4;
}
.cd-pagination .button:first-of-type a::before {
content: '0ab ';
}
.cd-pagination .button:last-of-type a::after {
content: ' 0bb';
}
.cd-pagination .current {
/* 当前页码 */
background-color: #64a281;
border-color: #64a281;
color: #ffffff;
pointer-events: none;
}
@media only screen and (min-width: 768px) {
.cd-pagination li {
display: inline-block;
}
}
@media only screen and (min-width: 1170px) {
.cd-pagination {
margin: 4em auto 8em;
}
}

此外，我们使用svg制作箭头图标，如果你要使用左右箭头代替上一页和下一页的按钮文字，则可以使用以下代码。

.cd-pagination.custom-buttons .button a {
width: 40px;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
color: transparent;
background-image: url("../img/cd-icon-arrow.svg");
background-repeat: no-repeat;
background-position: center center;
}
.cd-pagination.custom-buttons .button:last-of-type a {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

以上所述是小编给大家介绍的纯CSS制作自适应分页条附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！