cid1015 用6 分钟 HTML CSS 翻页设计包括源码下载
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css"> </head> <body> <div class="pagination"> <a href="#" class="prev"><i class="fas fa-angle-left"></i></a> <a href="#" class="num active">1</a> <a href="#" class="num">2</a> <a href="#" class="num">3</a> <a href="#" class="num">4</a> <a href="#" class="num">5</a> <a href="#" class="next"><i class="fas fa-angle-right"></i></a> </div> </body> </html>
style.css
*{ margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; font-family: "Open Sans",sans-serif; } body{ background: #f1f1f1; } .pagination{ position: absolute; top: 50%; width: 100%; text-align: center; transform: translateY(-50%); } .pagination a{ margin: 6px 1px; display: inline-block; width: 60px; background: #2c3e50; height: 60px; line-height: 60px; color: #fff; font-weight: 600; transition: 0.3s; position: relative; padding-right: 26px; } .prev,.next{ padding-right: 12px !important; font-size: 20px; } .pagination a:hover{ color: #e74c3c; } .active{ color: #e74c3c !important; } .prev{ border-radius: 30px 0 0 30px; } .next{ border-radius: 0 30px 30px 0; } .pagination a::before,.pagination a:after{ content: ""; position: absolute; border-top: 30px solid transparent; border-bottom: 30px solid transparent; } .num::before,.next::before{ border-right: 20px solid #2c3e50; right: 100%; } .num:after,.prev:after{ border-right: 20px solid #f1f1f1; right: 0; }
