css的clip-path实现不规则倾斜网格图片相册悬浮高亮显示代码
代码语言:html
所属分类:其他
代码描述:css的clip-path实现不规则倾斜网格图片相册悬浮高亮显示代码,其他图片鼠标悬浮后变得暗淡。
代码标签: css clip-path 不规则 倾斜 网格 图片 相册 悬浮 高亮 显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrapper{ --_gap: .5rem; --_offset: 10%; --_offset-1: calc(var(--_offset) * 1); --_offset-2: calc(var(--_offset) * 2); --_offset-3: calc(var(--_offset) * 3); --_offset-7: calc(var(--_offset) * 7); --_offset-8: calc(var(--_offset) * 8); --_offset-9: calc(var(--_offset) * 9); width: calc(100% - 4rem); max-width: 800px; margin: 2rem auto; color: white; font-family: system-ui; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--_gap); } .wrapper > div{ aspect-ratio: 1; transition: 500ms ease-in-out; clip-path: polygon(var(--_clip-path)); } .wrapper img{ width: 100%; height: 100%; object-fit: cover; display: block; } .wrapper > div:nth-child(n+4){ margin-top: calc(var(--_offset-3) * -1 + var(--_gap)); } .wrapper > div:nth-child(1){ --_clip-path: 0 0, 100% 0, 100% var(--_offset-9), 0 100%; } .wrapper > div:nth-child(2){ --_clip-path:0 0, 100% 0, 100% var(--_offset-8), 0 var(--_offset-9); } .wrapper > div:nth-child(3){ --_clip-path:0 0, 100% 0, 100% var(--_offset-7), 0 var(--_offset-8); } .wrapper > div:nth-child(4){ --_clip-path:0 var(--_offset-3), 100% var(--_offset-2), 100% var(--_offset-8), 0 var(--_offset-7); } .wrapper > div:nth-child(5){ --_clip-path:0 var(--_offset-2), 100% var(--_offset-1), 100% var(--_offset-9), 0 var(--_offset-8); } .wrapper > div:nth-child(6){ --_clip-path:0 var(--_offset-1), 100% 0%, 100% 100%, 0 var(--_offset-9); } .wrapper > div:nth-child(7){ --_clip-path:0 0%, 100% var(--_offset-1), 100% 100%, 0 100%; } .wrapper > div:nth-child(8){ --_clip-path:0 var(--_offset-1), 100% var(--_offset-2), 100% 100%, 0 100%; } .wrapper > div:nth-child(9){ --_clip-path:0 var(--_offset-2), 100% var(--_off.........完整代码请登录后点击上方下载按钮下载查看
网友评论0