css实现群组协作团队成员图像布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现群组协作团队成员图像布局效果代码,鼠标悬浮可显示团队成员全名。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --color_01: #46244c; --color_02: #712b75; --color_03: #c74b50; --color_04: #d49b54; --color_05: #6ebf8b; --color_06: #5f7464; --color_01: #ff1818; --color_02: #ffc300; --color_03: #36ae7c; --color_04: #fa58b6; --color_05: #ff8d29; --color_06: #00b4d8; } .collabGroup { display: flex; } .collabGroup:nth-of-type(2) { transform: scale(1.5); } .avatar { position: relative; font-family: sans-serif; font-weight: bold; width: 36px; height: 36px; background: var(--color_01); color: white; box-sizing: border-box; border: 2px solid white; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-right: -6px; outline: 0; outline-offset: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 20%); } .collabGroup .avatar:nth-of-type(2n) { background-color: var(--color_02); } .collabGroup .avatar:nth-of-type(3n) { background-color: var(--color_03); } .collabGroup .avatar:nth-of-type(4n) { background-color: var(--color_04); } .collabGroup .avatar:nth-of-type(5n) { background-color: var(--color_05); } .collabGroup .avatar:nth-of-type(6n) { background-color: var(--color_06); } .avatar:not([fullName=""])::before { content: attr(fullName); position: absolute; top: 0; left: 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 4px 8px; white-space: nowrap; font-size: 0.75em; font-weight: normal; border-radius: 4px; opacity: 0; pointer-events: none; color: #333333; background-color: #ffffff; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); transform: translate(-50%, 0); transition: opacity 100ms linear 0s, transform 200ms ease-in 0s; } .avatar:hover::before, .avatar:focus-visible::before { opacity: 1; transform: translate(-50%, -32px); transition: opacity 100ms linear 500ms, transform 200ms ease-out 500ms; } .avatar .collabGroup { display: flex; padding: 16px 16px 16px 10px; border-radius: 8px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: absolute; bottom: 10px; background-color: #1c283c; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: transform 200ms ease-out 0s, opacity 100ms linear 0s; } .avatar:hover { box-shadow: 0 0 0 2px rgba(0, 0, 0, 20%) inset; } .avatar:focus { box-shadow: 0 0 0 2px #869cff; } .avatar:hover .collabGroup, .avatar:focus .collabGroup { transform: translateY(-24px); opacity: 1; pointer-events: all; } .collabGroup .collabGroup:focus-within { transform: translateY(-24px); opacit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0