悬浮分页动画效果
代码语言:html
所属分类:菜单导航
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Hover and Active Pagination</title> <style> * { box-sizing: border-box; font-family: sans-serif; font-weight: 500; letter-spacing: 0; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } html, body { overflow-x: hidden; height: 100%; } html { text-rendering: optimizeLegibility; } body { padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0; } a, a:hover { text-decoration: none; } .pagination { display: flex; justify-content: center; } .pagination-container { padding: 10px 0; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.1); background-color: #fff; display: inline-flex; position: relative; overflow: hidden; } .pagination-hover-overlay { background-color: #00c1dd; width: 50px; height: 50px; border-radius: 5px; position: absolute; top: 50%; transform: translateY(-50%); transition-duration: 0.5s; left: 60px; opacity: 0; } .pagination .icon-pagination { color: rgba(51, 61, 69, 0.5); font-size: 11px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 3; background-color: #fff; } .pagination-prev { margin-right: 15px; margin-left: 10px; } .pagination-prev .icon-pagination-prev { transform: rotate(0deg); } .pagination-next { margin-left: 15px; margin-right: 10px; } .pagination-next .icon-pagination-next { transform: rotate(180deg); } .pagination-page-number { border-radius: 5px; color: #333d45; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition-duration: 0.5s; position: relative; z-index: 2; font-weight: 700; font-size: 18px; } .pagination-page-number:hover { color: #fff; } .pagination-page-number.active { color: #fff; } </style> </head> <body translate="no"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <div class="pagination"> <div class="pagination-container"> <div class="pagination-hover-overlay"></div> <a href="#0" class="pagination-prev"> <span class="icon-pagination icon-pagination-prev"> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0