div+css实现蜂巢六边形悬停凸出效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现蜂巢六边形悬停凸出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --sizeVar: 7vw; --persVar: 50vw; } body, .flex-wrapper, .flex-wrapper div { transform-style: preserve-3d; perspective: var(--persVar); } body { display: flex; justify-content: center; align-items: center; position: absolute; margin-right: calc(var(--sizeVar) * 2); inset: 0; background-color: #000000; } .flex-wrapper { display: flex; flex-direction: column; transform: rotate3d(1, 0, 0, 70deg); /* 80deg */ } .flex-container { position: relative; display: flex; gap: calc(var(--sizeVar) / 2); height: calc(var(--sizeVar) / 2); } .flex-container:nth-of-type(even) { transform: translateX(calc(var(--sizeVar) / 1.33)); } .flex-container:has(.hive:hover) { z-index: 999; } .hive { width: var(--sizeVar); height: var(--sizeVar); scale: 0.95; cursor: pointer; } .hive::after, .hive::before { content: ""; position: absolute; width: 100%; height: 100%; -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: linear-gradient( 90deg, rgba(215, 123, 21, 1) 0%, rgba(255, 220, 0, 1) 100% ); transition: transform 300ms ease-in-out 0s, filter 300ms ease-in-out 0s; } .hive:hover::after { transform: translateZ(calc(var(--sizeVar) / 10)); filter: brightness(200%); } .hive::before { background: black; opacity: 0.2; scale: 1; transition: transform 300ms linear 0s; } .hive:hover::before { scale: 1.25; opacity: 0.2; } </style> </head> <body translate="no"> <div class="flex-wrapper"> <div class="flex-container"> <div class="hive"></div> <div class="hive"></div> <div class="hive"></div> <div class="hive"></div> <div class="hive"></div> </div> <div class="flex-container"> <div class="hive"></div> <div class="hive"></div> <div class="hive"></div> <div class="hive"></div> <div class="hive"></div> </div> <div class="flex-container"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0