文章最后更新时间:2024年04月13日
为盒子添加阴影,增加盒子的立体感,可以多层叠加,并且会使阴影更加丝滑
HTML
<ul class="pagination"> <li class="page-prev"><a class="prev" href="#"><svg t="1580195949197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4493" width="20" height="20"><path d="M906.78272 588.78976c-0.02048 8.4992-6.88128 15.36-15.38048 15.37024l-443.6992-0.01024 75.70432 191.68256c2.51904 6.42048 0.48128 13.76256-5.03808 17.90976-5.51936 4.16768-13.13792 4.1472-18.61632-0.09216l-376.5248-289.47456c-3.77856-2.89792-6.00064-7.41376-6.00064-12.16512 0-4.78208 2.22208-9.27744 6.00064-12.1856l376.5248-289.47456c2.7648-2.11968 6.06208-3.19488 9.37984-3.19488 3.23584 0 6.5024 1.03424 9.23648 3.10272 5.51936 4.1472 7.5776 11.48928 5.03808 17.90976L447.68256 419.84l443.71968-0.01024c8.4992 0.01024 15.36 6.88128 15.36 15.36L906.78272 588.78976z" p-id="4494" fill="#777777"></path></svg></a> </li> <li class="page-number active"><a href="#">1</a></li> <li class="page-number"><a href="#">2</a></li> <li class="page-number"><a href="#">3</a></li> <li class="page-number"><a href="#">4</a></li> <li class="page-number"><a href="#">5</a></li> <li class="page-number"><a href="#">6</a></li> <li class="page-next"><a class="next" href="#"><svg t="1580195920917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4995" width="20" height="20"><path d="M906.77248 512c0 4.77184-2.21184 9.2672-5.9904 12.17536l-376.5248 289.4848c-2.7648 2.11968-6.06208 3.18464-9.3696 3.18464-3.25632 0-6.5024-1.03424-9.24672-3.09248-5.50912-4.15744-7.5776-11.48928-5.03808-17.90976l75.71456-191.67232L132.58752 604.17024c-8.48896 0-15.36-6.88128-15.36-15.36l0-153.6c0-8.48896 6.87104-15.36 15.36-15.36l443.72992 0-75.71456-191.68256c-2.53952-6.42048-0.47104-13.75232 5.04832-17.90976 5.50912-4.15744 13.12768-4.13696 18.60608 0.09216l376.5248 289.4848C904.56064 502.7328 906.77248 507.22816 906.77248 512z" p-id="4996" fill="#777777"></path></svg></a> </li> </ul>
CSS<scss>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #ECEFFC; } .pagination { --active-index: 0; display: flex; padding: 10px 20px; background: white; border-radius: 50px; box-shadow: 0 0.3px 0.6px rgba(0, 0, 0, 0.056), 0 0.7px 1.3px rgba(0, 0, 0, 0.081), 0 1.3px 2.5px rgba(0, 0, 0, 0.1), 0 2.2px 4.5px rgba(0, 0, 0, 0.119), 0 4.2px 8.4px rgba(0, 0, 0, 0.144), 0 10px 20px rgba(0, 0, 0, 0.2) ; list-style-type: none; li { margin: 0 5px; &.page-number { width: 50px; height: 50px; line-height: 50px; text-align: center; &:hover a { color: white; background: #777; } &.active a { color: white; background: #333; } } &.page-prev, &.page-next { font-weight: 700; } &.page-prev { margin-right: 20px; } &.page-next { margin-left: 20px; } a { display: block; line-height: 50px; font-size: 20px; font-weight: 600; text-decoration: none; color: #777; border-radius: 50%; transition: 0.3s; &.prev:hover path, &.next:hover path { fill: darken(#777, 50%); } } } }
JS<TypeScript>
let prevLink = document.querySelector(".prev"); let nextLink = document.querySelector(".next"); let pagination = document.querySelector(".pagination"); let pageNumberLinks = document.querySelectorAll(".page-number a"); let maxPageIndex = pageNumberLinks.length - 1; pageNumberLinks.forEach((pageNumberLink, activeIndex) => { pageNumberLink.addEventListener("click", () => { pageNumberLinks.forEach(pageNumberLink => pageNumberLink.parentElement.classList.remove("active") ); pageNumberLink.parentElement.classList.add("active"); (pagination as HTMLElement).style.setProperty( "--active-index", `${activeIndex}` ); }); }); prevLink.addEventListener("click", () => { pageNumberLinks.forEach(pageNumberLink =>pageNumberLink.parentElement.classList.remove("active") ); let activeIndex = Number( (pagination as HTMLElement).style.getPropertyValue("--active-index") ); activeIndex = activeIndex > 0 ? activeIndex - 1 : 0; pageNumberLinks[activeIndex].parentElement.classList.add("active"); (pagination as HTMLElement).style.setProperty( "--active-index", `${activeIndex}` ); }); nextLink.addEventListener("click", () => { pageNumberLinks.forEach(pageNumberLink =>pageNumberLink.parentElement.classList.remove("active") ); let activeIndex = Number( (pagination as HTMLElement).style.getPropertyValue("--active-index") ); activeIndex = activeIndex < maxPageIndex ? activeIndex + 1 : maxPageIndex; pageNumberLinks[activeIndex].parentElement.classList.add("active"); (pagination as HTMLElement).style.setProperty( "--active-index", `${activeIndex}` ); });
文章版权声明:除非注明,否则均为折腾博客原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...