用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - css代码库

创意个性的css3折角分页样式代码

2018-10-29 作者:hywoniu举报

[css]代码库

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css3折角分页样式代码</title>
	
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/demo.css"><!--演示页面样式,使用时可以不引用-->
	
	<style type="text/css">
		.demo{ background: #081f3c; padding: 2em 0;}
		.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: 2px solid #fff;
		    outline-offset: -6px;
		    font-size: 20px;
		    font-weight: 700;
		    color: #fff;
		    letter-spacing: 1px;
		    margin: 0 8px 0 0;
		    position: relative;
		    z-index: 1;
		    transition: all 0.4s ease 0s;
		}
		.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: thin dotted;
		    outline-offset: -2px;
		}
		.pagination li a.page-link:before{
		    content: "";
		    width: 0;
		    height: 0;
		    background: rgba(0, 0, 0, 0) linear-gradient(135deg, #081f3c 45%, #aaa 50%, #ccc 56%, #fff 80%);
		    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
		    position: absolute;
		    top: 0;
		    left: 0;
		    transition: all 0.3s ease 0s;
		}
		.pagination li a.page-link:hover:before,
		.pagination li.active a.page-link:before{
		    width: 17px;
		    height: 17px;
		}
		@media only screen and (max-width: 480px){
		    .pagination{ display: block; }
		    .pagination li{
		        display: inline-block;
		        margin-bottom: 10px;
		    }
		}
	</style>
	
</head>
<body>

	<div class="demo">
		<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">&laquo;</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">&raquo;</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>
转自:http://www.sucaihuo.com/js/3827.html

[代码运行效果截图]


创意个性的css3折角分页样式代码


分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。