纯css实现数据分页效果代码
代码语言:html
所属分类:其他
代码描述:纯css实现数据分页效果代码,无js代码参与,全程div+css实现数据分页。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url("https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Noto+Color+Emoji&display=swap"); * { box-sizing: border-box; } html { font-size: 18px; } body { font-family: "Gochi Hand", "Noto Color Emoji", cursive, sans-serif; width: 100vw; height: 100vh; } .backdrop { background-color: rgba(255, 255, 255, 0.5); width: 100%; height: 100%; display: flex; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .container { background-color: #ffffff; padding: 2rem 1rem; margin: auto; display: flex; flex-direction: column; border-radius: 1rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); } .container > h1 { font-size: 2rem; text-align: center; padding: 1rem; } .vegetables { width: 100vw; max-width: 384px; display: flex; flex-wrap: nowrap; overflow: hidden; } .list { width: 100%; flex-shrink: 0; transition: transform cubic-bezier(0.18, 0.89, 0.32, 1.28) 512ms; } .list li { text-align: center; width: 100%; padding: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pagination { width: 100%; padding: 0 1rem; margin-top: 1.5rem; display: flex; justify-content: center; } .pagination:not(:has(.page-btn:target)) .page-step[data-shown="1"] { display: inline-flex; } .pagination:not(:has(.page-btn:target)) #page-1 { color: #ffffff; background-color: #1b95ff; } .page-btn { color: #000000; width: 2.5rem; height: 2.5rem; margin-right: 0.25rem; display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; } .page-btn:last-child { margin-right: 0; } .page-btn:is(a) { text-decoration: none; background-color: #ffffff; border-radius: 50%; cursor: pointer; transition: color 128ms ease-out, background-color 128ms ease-out; } .page-btn:is(a):not(:target):hover, .page-btn:is(a):not(:target):focus, .page-btn:is(a):not(:target):active { background-color: #dfdfdf; } .page-btn:is(a):target { color: #ffffff; background-color: #1b95ff; } .page-num { display: none; } .page-step { display: none; } .container:has(#page-1:target) > .vegetables > .list { transform: translateX(0%); } .container:has(#page-1:target) .page-step[data-shown="1"] { display: inline-flex; } .container:has(#page-2:target) > .vegetables > .list { transform: translateX(-100%); } .container:has(#page-2:target) .page-step[data-shown="2"] { display: inline-flex; } .container:has(#page-3:target) > .vegetables > .list { transform: translateX(-200%); } .container:has(#page-3:target) .page-step[data-shown="3"] { display: inline-flex; } .container:has(#page-4:target) > .vegetables > .list { transform: translateX(-300%); } .container:has(#page-4:target) .page-step[data-shown="4"] { display: inline-flex; } .container:has(#page-5:target) > .vegetables > .list { transform: translateX(-400%); } .container:has(#page-5:target) .page-step[data.........完整代码请登录后点击上方下载按钮下载查看
网友评论0