# 分頁 ### 1. ![](https://i.imgur.com/qG6O8WO.gif) ``` <body> <div class="pagination"> <ul> <li class="prev"><a href="#">< Prev</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li class="next"><a href="#">Next ></a></li> </ul> </div> </body> ``` ``` html,body { height: 100%; } body { display: flex; margin: 0; justify-content: center; align-items: center; background-color: mediumseagreen; font: 24px "Montserrat"; } .pagination ul { display: flex; margin: 0; padding: 20px 15px; list-style: none; border-radius: 50px; background-color: white; box-shadow: 0px 5px 15px rgba(0,0,0,0.2); } .pagination ul li { line-height: 40px; margin: 0 15px; } .pagination ul li:not(:first-child,:last-child) { width: 40px; height: 40px; text-align: center; } .pagination ul li a { display: block; color: black; text-decoration: none; border-radius: 50%; transition: all .4s ease 0s; } .pagination ul li:hover:not(:first-child,:last-child) a { background-color: black; color: white; } ``` ### 2. ![](https://i.imgur.com/lc1iIfy.gif) ``` <body> <div class="pagination"> <ul> <li class="prev"><a href="#"><</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li class="next"><a href="#">></a></li> <div class="bar"></div> </ul> </div> </body> ``` ``` html,body { height: 100%; } body { display: flex; margin: 0; justify-content: center; align-items: center; background-color: mediumseagreen; font: 24px "Montserrat"; } .pagination ul{ display: flex; margin: 0; padding: 0 10px; list-style: none; border-radius: 5px; background-color: white; box-shadow: 0px 5px 15px rgba(0,0,0,0.2); position: relative; } .pagination ul li { width: 50px; height: 50px; line-height: 50px; text-align: center; } .pagination ul li a { display: block; text-decoration: none; transition: all .3s linear 0s; } .pagination ul li:hover a{ color: orange; } .bar { position: absolute; width: 50px; height: 3px; background-color: orange; bottom: 0; left: 60px; transition: all .3s linear 0s; } .pagination ul li:nth-child(2):hover ~ .bar{ left: 60px; } .pagination ul li:nth-child(3):hover ~ .bar{ left: 110px; } .pagination ul li:nth-child(4):hover ~ .bar{ left: 160px; } .pagination ul li:nth-child(5):hover ~ .bar{ left: 210px; } .pagination ul li:nth-child(6):hover ~ .bar{ left: 260px; } ``` ### 3. ![](https://i.imgur.com/VfwUKmI.gif) ``` <body> <div class="pagination"> <ul> <div class="slider"> </div> <li class="prev"><a href="#"><span><</span></a></li> <li class="number"><a href="#"><span>1</span></a></li> <li class="number"><a href="#"><span>2</span></a></li> <li class="number"><a href="#"><span>3</span></a></li> <li class="number"><a href="#"><span>4</span></a></li> <li class="number"><a href="#"><span>5</span></a></li> <li class="next"><a href="#"><span>></span></a></li> <svg> <defs> <filter id="fancy-goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /> <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -11 " result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script type="text/javascript"> $(document).ready(function() { $(".number a").click(function() { var position = $(this).position(); var margin = 5; $(".slider").css({"left" : position.left + margin}); }) }) </script> </body> ``` ``` * { padding: 0; margin: 0; font-family: "Montserrat",sans-serif; /* box-sizing: border-box; */ } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: black; } .pagination ul { display: flex; justify-content: center; align-items: center; list-style: none; position: relative; filter: url(#fancy-goo); } svg { display: none; } .pagination ul li a { display: block; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; color:white; background-color: #2e3142; text-decoration: none; text-align: center; transition: all .3s linear 0s ; margin: 5px; } .pagination .slider { width: 60px; height: 60px; line-height: 60px; background-color: #f72c53; border-radius: 50%; position: absolute; z-index: 1; left: 75px; transition: 1s; } .pagination ul li a span { position: relative; z-index: 9; } ```