两款漂亮的bootstrap分页样式特效代码

两款漂亮的bootstrap分页样式特效代码

这是两款漂亮的bootstrap分页样式。他们在元素bootstrap3分页样式的基础上,通过简单的CSS3代码来对它进行美化,生成漂亮的分页样式。

使用方法
在页面中引入bootstrap文件。

1
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

HTML结构
这两款分页样式的基本HTML DOM 结构相同,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="demo" style="min-height: 300px;">
    <div class="container">            
        <div class="row pad-15">
            <div class="col-md-12">
                <nav class="pagination-outer" aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <a href="#" class="page-link" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item active"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item">
                            <a href="#" class="page-link" aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

CSS样式
然后为分别为分页样式添加下面的CSS样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/* 分页样式一 */
.pagination-outer{ text-align: center; }
.pagination{
    font-family: 'Allerta Stencil', sans-serif;
    display: inline-flex;
    position: relative;
}
.pagination li a.page-link{
    color: #fff;
   background: transparent;
    font-size: 21px;
    line-height: 35px;
    height: 38px;
    width: 38px;
    padding: 0;
    margin: 0 8px;
    border: none;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease 0s;
}
.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover{
    color: #fff;
   background-color: transparent;
}
.pagination li a.page-link:before,
.pagination li a.page-link:after{
    content:'';
    background: linear-gradient(225deg,#f857a6,#ff5858);
   height: 100%;
    width: 100%;
    border: 3px solid #fff;
   box-shadow: 0 0 3px #000;
   border-radius: 50%;
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transition: all 0.3s ease-in;
}
.pagination li a.page-link:hover:before,
.pagination li.active a.page-link:before{
    border-radius: 50% 0 50% 50%;
}
.pagination li a.page-link:after{
    background: #fff;
   height: 5px;
    width: 5px;
    border: none;
    box-shadow: 0 0 0 transparent;
    opacity: 0;
    transform: translateX(-50%) translateY(0) rotate(0);
    top: auto;
    bottom: 0;
}
.pagination li a.page-link:hover:after,
.pagination li.active a.page-link:after{
    opacity: 1;
    bottom: 85%;
}
.pagination li:first-child a.page-link:before{
    transform: translateX(-50%) translateY(-50%) rotate(-135deg);
}
.pagination li:first-child a.page-link:hover:before{ border-radius: 50% 0 50% 50%; }
.pagination li:first-child a.page-link:after{
    transform: translateX(0) translateY(-50%);
    top: 50%;
    bottom:auto;
    left: auto;
    right: 0;
 }
.pagination li:first-child a.page-link:hover:after{ right: 80%; }
.pagination li:last-child a.page-link:before{
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.pagination li:last-child a.page-link:hover:before{ border-radius: 50% 0 50% 50%; }
.pagination li:last-child a.page-link:after{
    transform: translateX(0) translateY(-50%);
    bottom:auto;
    top: 50%;
    left: 0;
}
.pagination li:last-child a.page-link:hover:after{ left: 80%; }
@media only screen and (max-width: 480px){
    .pagination{ display: block; }
 
    .pagination li{
        margin-bottom: 10px;
        display: inline-block;
    }
}      
 
/* 分页样式二 */
.pagination-outer{ text-align: center; }
.pagination{
    font-family: 'Rubik', sans-serif;
    display: inline-flex;
    position: relative;
}
.pagination li a.page-link{
    color: #10ac84;
   background-color: transparent;
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    height: 40px;
    width: 40px;
    margin: 0 5px 10px;
    border: none;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease 0s;
}
.pagination li.active a.page-link,
.pagination li a.page-link:hover,
.pagination li.active a.page-link:hover{
    color: #fff;
   background-color: #10ac84;
}
.pagination li:first-child a.page-link:hover,
.pagination li:last-child a.page-link:hover{
    box-shadow: 0 0 10px rgba(0,0,0,0.9);
}
.pagination li a.page-link:before{
    content: attr(data-hover);
    color: rgba(255,255,255,0.2);
    font-size: 80px;
    font-weight: 700;
    height: 100%;
    width: 100%;
    opacity: 1;
    position: absolute;
    top: 100%;
    left: 0;
    transition: all 0.3s ease 0s;
}
.pagination li a.page-link:hover:before,
.pagination li.active a.page-link:before{
    opacity: 1;
    top: 10px;
}
@media only screen and (max-width: 480px){
    .pagination{ display: block; }
    .pagination li{
        margin-bottom: 10px;
        display: inline-block;
    }
}
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论