css实现自适应响应式团队成员介绍卡片效果代码
代码语言:html
所属分类:响应式
代码描述:css实现自适应响应式团队成员介绍卡片效果代码,适合公司主页团队板块。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;800&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #171717; min-height: 100vh; } img { max-width: 100%; display: block; } ul { list-style-type: none; } ul i { color: #fff; font-size: clamp(0.9rem, 0.825rem + 0.3vw, 1.2rem); } ul i:hover { color: #f2709c; } section { font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; padding-block: min(20vh, 6rem); padding-inline: clamp(1rem, 10%, 6rem); text-align: center; } section span, section p, section h2, section h3 { letter-spacing: 0.035rem; } section p { line-height: 1.6; color: #a3a3a3; max-width: 50rem; margin: 0 auto; font-size: clamp(0.9rem, 0.825rem + 0.3vw, 1.2rem); } section .bg-watermark { color: #1f1f1f; font-size: clamp(6rem, 1.3333rem + 14.9333vw, 20rem); font-weight: 800; position: absolute; z-index: -1; left: 50%; transform: translatex(-50%) translatey(-15%); user-select: none; letter-spacing: 0.5rem; } section span { text-transform: uppercase; display: block; font-size: 1.2rem; color: #a3a3a3; } section h2 { font-size: clamp(3.5rem, 3rem + 1.6vw, 5rem); margin-top: -0.625rem; color: #fff; } section .cards { margin-top: 7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 2rem; } @media screen and (min-width: 51rem) { section .cards { gap: 0; } } section .cards .card { position: relative; cursor: pointer; } section .cards .card h3, section .cards .card p { text-transform: capitalize; } section .cards .card h3 { font-size: clamp(1rem, 0.9167rem + 0.2667vw, 1.25rem); font-weight: 400; color: #f6f6f6; } section .cards .card p { font-size: clamp(0.85rem, 0.75rem + 0.32vw, 1.15rem); letter-spacing: 0.12rem; font-weight: 300; max-width: 100%; } section .cards .card::before { position: absolute; content: ""; width: 5rem; height: 6.25rem; z-index: 0; transition: 0.3s ease-in-out; background: #f2709c; background: -webkit-linear-gradient(to left, #ff9472, #f2709c); background: linear-gradient(to left, #ff9472, #f2709c); top: -0.375rem; left: -0.375rem; } section .cards .card::after { position: absolute; inset: 0; content: ""; width: 100%; height: 100%; background: #232526; background: -webkit-linear-gradient(to bottom, rgba(65, 67, 69, 0.2), rgba(8, 8, 8, 0.9)); background: linear-gradient(to bottom, rgba(65, 67, 69, 0.2), rgba(8, 8, 8, 0.9)); } section .cards .card img { filter: grayscale(100%); transition: 0.5s ease; } section .cards .card-content { position: absolute; bottom: 0; z-index: 99; left: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0