純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   id="gwjpgfw"   class="demo">	<div   id="lmoxdne"   class="container">		<div   id="fgmkbed"   class="row pad-15">			<div   id="jsbdbwn"   class="col-md-12">				<nav class="pagination-outer" aria-label="Page navigation">					<ul class="pagination">						<li id="nzqhusy"    class="page-item">															<span aria-hidden="true">«</span>													</li>						<li id="ojwgzfa"    class="page-item">1</li>						<li id="ozikfpo"    class="page-item">2</li>						<li id="ejegisc"    class="page-item active">3</li>						<li id="xrpndoy"    class="page-item">4</li>						<li id="tctzqaz"    class="page-item">5</li>						<li id="grxdfav"    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西游記西天取經場景動畫特效