css实现卡片列表数据分页动画效果代码
代码语言:html
所属分类:其他
代码描述:css实现卡片列表数据分页动画效果代码,新数据进入有入场渐显动画效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin: 0; overflow: hidden; } *, *:before, *:after { box-sizing: border-box; } input { display: none; opacity: 0; height: 0; width: 0; visibility: hidden; pointer-events: none; } .page-wrapper { display: flex; flex-direction: column; align-items: center; background-color: #fbfbfb; padding: 40px; height: 100vh; width: 100vw; box-shadow: 0 0 120px -50px #ff00004d inset; } .content { position: relative; background-color: #f3f3f3; height: calc(100% - 60px); width: 100%; max-width: 991px; } .page { position: absolute; display: flex; flex-wrap: wrap; top: 20px; left: 20px; height: calc(100% - 40px); width: calc(100% - 40px); } .page .item { background-color: #d7d7d7; box-shadow: 0 0 15px -12px rgb(0 0 0 / 21%), 0 0 30px -21px rgb(61 14 14 / 44%) inset; height: calc((100% - 20px) / 2); width: calc((100% - 40px) / 3); margin-right: 20px; margin-bottom: 20px; opacity: 0; pointer-events: none; z-index: 1; } .page1 .item { background-color: #d6e9d6; } .page2 .item { background-color: #e9d6d6; } .page3 .item { background-color: #d6e0e9; } .page4 .item { background-color: #e5d6e9; } .page5 .item { background-color: #e9e7d6; } .page .item.item:nth-child(3n) { margin-right: 0; } .navigation { display: flex; justify-content: center; align-items: center; position: relative; background-color: rgb(231, 231, 231); height: 60px; padding: 10px 60px; width: 100%; max-width: 991px; box-shadow: 0 0 3px -7px black inset; user-select: none; } .navigation-wrapper { display: flex; } .navigation-wrapper .nav-item div { display: flex; align-items: center; justify-content: center; color: #f3f3f3; text-shadow: 0 0 2px rgba(0, 0, 0, 0.322), 0 0 2px #000000, 0 0 2px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000, 0 0 1px #000000; height: 36px; width: 36px; background-color: #626fbf; border-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0