纯CSS3折角样式分页代码

2024-09-05 12:17:26

字体：大中小

来源：转载

供稿：网友

纯CSS3折角样式分页代码是一款红色的折角分页样式，鼠标悬停分页折角效果代码。

<!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"><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">															<span aria-hidden="true">«</span>													</li>						<li class="page-item">1</li>						<li class="page-item">2</li>						<li class="page-item active">3</li>						<li class="page-item">4</li>						<li class="page-item">5</li>						<li class="page-item">															<span aria-hidden="true">»</span>													</li>					</ul>				</nav>			</div>		</div>	</div></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p><p>来源：vevb</p></div></body></html>

上一篇：36种漂亮的CSS3网页按钮Button样式

下一篇：CSS3西游记西天取经场景动画特效

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注