css实现团队成员人物介绍卡片列表悬浮放大效果代码
代码语言:html
所属分类:悬停
代码描述:css实现团队成员人物介绍卡片列表悬浮放大效果代码
代码标签: css 团队 成员 人物 介绍 卡片 列表 悬浮 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Secular+One&display=swap'> <style> @import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap"); :root { --yellow: #ffdd40; --dark: #2f313a; --deg: -86deg; --trans: all 0.4s ease 0s; } body { margin: 0; padding: 0; overflow-x: hidden; display: flex; justify-content: center; font-family: "Lato", Arial, Helvetica, serif; background: linear-gradient(90deg, #131417, var(--dark) 35% 65%, #131417); font-size: 1em; } body *, body *:before, body *:after { box-sizing: border-box; } .content { width: 90vmin; } h2 { text-align: center; } .team { padding: 2em 0 2em 2.5em; margin: 0; } .member { margin: 1.5em 0 0.5em; padding: 0.73em; background: linear-gradient( 83deg, var(--yellow) 0 97%, #fff0 calc(97% + 1px) 100% ); position: relative; list-style: none; min-height: 10vmin; display: inline-block; transform: scale(0.85); transition: var(--trans); } .member:nth-of-type(even) { text-align: right; background: linear-gradient( -83deg, var(--yellow) 0 97%, #fff0 calc(97% + 1px) 100% ); } .thumb { width: 12vmin; height: 12vmin; float: left; margin-right: 2em; background: linear-gradient( var(--deg), var(--dark) 0 70%, var(--yellow) 0% 100% ); transform: rotate(-4deg); transition: var(--trans); border-radius: 0.25em; overflow: hidden; margin-left: -3em; padding: 0.5em; } .member:nth-of-type(even) .thumb { --deg: 86deg; float: right; margin-left: 2em; margin-right: -3em; transform: rotate(4deg); } .thumb img { width: 100%; height: 100%; border-radius: 0.25em; filter: grayscale(1); background: var(--dark); } .member:hover { transform: scale(1); transition: var(--trans); filter: drop-shadow(0px 20px 10px #0008); } .member:hover .thumb { padding: 0.1em; transition: var(--trans); transform: rotate(-1deg); --deg: -89deg; } .member:nth-of-type(even):hover .thumb { --deg: 91deg; } .member:hover .thumb img { filter: none; transition: var(--trans); } .description { padding-top: 1vmin; } .description p { padding: 0 2em; } h3 { background: linear-gradient(182deg, #fff0 60%, var(--dark) 0 100%); display: inline; transform: rotate(-2deg); position: absolute; margin: 0; margin-top: -2.25em; left: 9vmin; padding: 0.5em 0.75em; color: var(--yellow); border-radius: 0.25em; font-size: 1.35em; transform-origin: left bottom; } .member:nth-of-type(even) h3 { left: inherit; right: 9vmin; transform: rotate(2deg); transform-origin: right bottom; background: linear-gradient(-182deg, #fff0 60%, var(--dark) 0 100%); } .member:hover h3 { transition: var(--trans); transform: rotate(0deg); background: linear-gradient(180deg, #fff0 59%, var(--dark) 0 100%); } .co-funder:after { content: "CO-FUNDER"; font-size: 0.75em; position: absolute; top: -1.5em; background: var(--yellow); right: 4em; transform: rotate(3deg); padding: 0.35em 0.75em 0.5em; border-radius: 0.25em; color: var(--dark); font-weight: bold; } .co-funder:nth-of-type(even):after { right: inherit; left: 4em; transform: rotate(-3deg); } .description p a { display: inline-block; margin: 0.5em 0 0 0; background: var(--dark); color: var(--yellow); padding: 0.1em 0.5em 0.35em; border-radius: 0.5em; text-decoration: none; transition: var(--trans); } .description p a:hover { transition: var(--trans); color: var(--dark); background: var(--yellow); font-weight: bold; } .description p a img { float: left; width: 22px; filter: invert(1); border-radius: 0.15em; padding: 2px; background: #fff; margin-right: 2px; } </style> </head> <body > .........完整代码请登录后点击上方下载按钮下载查看
网友评论0