在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

折角分页-css3样式代码

分类:插件代码 更新时间:2018-07-23 浏览次数:931

代码简介

这是一款有趣的css3折角分页样式代码。该css3折角分页样式代码在鼠标经过时,分页项的左上角会像纸张一样弯曲折角,效果十分好看。

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE10+

使用方法

1. html:

<divclass="demo">
    <navclass="pagination-outer"aria-label="Page navigation">
        <ulclass="pagination">
            <liclass="page-item">
                <ahref="#"class="page-link"aria-label="Previous">
                    <spanaria-hidden="true">?</span>
                </a>
            </li>
            <liclass="page-item"><aclass="page-link"href="#">1</a></li>
            <liclass="page-item"><aclass="page-link"href="#">2</a></li>
            <liclass="page-item active"><aclass="page-link"href="#">3</a></li>
            <liclass="page-item"><aclass="page-link"href="#">4</a></li>
            <liclass="page-item"><aclass="page-link"href="#">5</a></li>
            <liclass="page-item">
                <ahref="#"class="page-link"aria-label="Next">
                    <spanaria-hidden="true">?</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

2. css:

.pagination-outer{text-align:center; }
.pagination{
    display: inline-flex;
    border-radius:0;
    overflow:hidden;
    position:relative;
}
.pagination li a.page-link{
    width:45px;
    height:45px;
    line-height:35px;
    background:#ff095c;
    border-radius:0;
    border:none;
    outline:2pxsolid#fff;
    outline-offset:-6px;
    font-size:20px;
    font-weight:700;
    color:#fff;
    letter-spacing:1px;
    margin:08px00;
    position:relative;
    z-index:1;
    transition:all0.4s ease0s;
}
.pagination li:first-child a.page-link,
.pagination li:last-child a.page-link{line-height:32px; }
.pagination li:last-child a.page-link{margin-right:0; }
.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover{
    background:#ff095c;
    color:#fff;
    outline:thindotted;
    outline-offset:-2px;
}
.pagination li a.page-link:before{
    content:"";
    width:0;
    height:0;
    background: rgba(0,0,0,0) linear-gradient(135deg,#081f3c45%,#aaa50%,#ccc56%,#fff80%);
    box-shadow:1px1px1pxrgba(0,0,0,0.4);
    position:absolute;
    top:0;
    left:0;
    transition:all0.3s ease0s;
}
.pagination li a.page-link:hover:before,
.pagination li.active a.page-link:before{
    width:17px;
    height:17px;
}
@media onlyscreenand (max-width:480px){
    .pagination{display:block; }
    .pagination li{
        display:inline-block;
        margin-bottom:10px;
    }
}    

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!