css清爽卡片堆叠文章分类悬浮效果代码
代码语言:html
所属分类:悬停
代码描述:css清爽卡片堆叠文章分类悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Arbutus+Slab|Open+Sans&display=swap"); body { background: #F9F9F9; color: #495456; margin: 72px; font-family: Open Sans, sans-serif; } h2 { font-family: Arbutus Slab, serif; font-weight: normal; color: #000; line-height: 1.25; } p { position: absolute; bottom: 0; font-size: 14px; } .container { max-width: 900px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-gap: 48px; margin: 0 auto; } .card { cursor: pointer; position: relative; height: 0; padding-bottom: 120%; --offset-multiplier: 4px; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; --translate: 0; -webkit-transform: translate(var(--translate), var(--translate)); transform: translate(var(--translate), var(--translate)); } .card:hover { --offset-multiplier: 6px; } .card:hover { --translate: calc(-1px * (var(--cards) - 1)); transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .child { position: absolute; width: 100%; height: 100%; padding: 0 16px; box-sizing: border-box; background: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px -4px 8px rgba(255, 255, 255, 0.8); border-radius: 6px; transition: inherit; --translate: calc(var(--offset) * var(--offset-multiplier)); -webkit-transform: translate(var(--translate), var(--translate)); transform: translate(var(--translate), var(--translate)); z-index: 5; } .child:nth-child(1) { --offset: 0; z-index: 4; } .child:nth-child(2) { --offset: 1; z-index: 3; } .child:nth-child(3) { --offset: 2; z-index: 2; } .child:nth-child(4) { --offset: 3; z-index: 1; } .child:nth-child(5) { --offset: 4; z-index: 0; } .child:nth-child(6) { --offset: 5; z-index: -1; } .child:nth-child(7) { --offset: 6; z-index: -2; } .child:nth-child(8) { --offset: 7; z-index: -3; } .child:nth-child(9) { --offset: 8; z-index: -4; } .child:nth-child(10) { --offset: 9; z-index: -5; } </style> </head> <body> <div class="container"> <div class="card" style="--cards:5;"> <div class="child"> <h2>Why do I need a will</h2> <p>5 articles</p> </div> <div class="child"></div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0