div+css实现方块格子悬浮三维悬浮凸出折叠效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现方块格子悬浮三维悬浮凸出折叠效果代码
代码标签: div css 方块 格子 悬浮 三维 悬浮 凸出 折叠
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; } :root { --angle: 22deg; --n-angle: calc(var(--angle) * -1); --gap: 0px; --item-padding: 0.25rem; --container-width: min(100vw - 6rem, 60rem); } body { background: #003; perspective: 800px; color: rgba(255, 255, 255, 0.8); text-align: center; margin-block: 2rem; } .container { transform-style: preserve-3d; width: var(--container-width); margin-inline: auto; margin-block: 3rem; transition: transform 0.5s ease-out; } .container:has(.item:first-child:hover) { transform: rotateY(5deg); } .container:has(.row > .item:nth-last-child(2):hover + .row), .container:has(.row > .item:last-child:hover) { transform: rotateY(-5deg); } .row { display: grid; grid-template-columns: repeat(5, 1fr); grid-column: 1/-1; gap: var(--gap); transform-style: preserve-3d; transition: transform 0.2s ease-out; transform-origin: center top; } .row:has(> .row:not(:first-child) > .item:hover) { transform: rotateX(var(--angle)); } .row:has(> .row:not(:first-child) > .item:hover) > .item span { box-shadow: inset 0 -0.25rem 0 rgba(0, 0, 0, 0.4); } .row:has(> .row:not(:first-child) > .item:hover) > .item:after { opacity: 0.15; } .row :not(:first-child):has(> .item:hover) { transform: rotateX(var(--n-angle)); } .row :not(:first-child):has(> .item:hover) > .row { transform: rotateX(var(--n-angle)); } .row :not(:first-child):has(> .item:hover) > .row > .item span { box-shadow: inset 0 0.25rem 0 rgba(255, 255, 255, 0.2); } .row :not(:first-child):has(> .item:hover) > .row > .item:before { opacity: 0.3; } .row :not(:first-child):has(> .item:hover) > .row > .row { transform: rotateX(var(--angle)); } .item { aspect-ratio: 1; padding: var(--item-padding); position: relative; transform: translate3d(0, 0, 0); transition: transform 0.5s ease-out; } .item:hover:before { background: #fff; opacity: 0.15; } .item:before, .item:after { content: ""; position: absolute; inset: var(--item-padding); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; border-radius: 0.25rem; } .item:before { background: linear-gradient(#000, transparent); } .item:after { background: linear-gradient(transparent, #fff); } .item span { display: block; aspect-ratio: 1; background: #f09; border-radius: 0.25rem; } .not-supported { display: none; } @supports not (selector(:has(*))) { .not-supported { display: block; } .intro { display: none; } } </style> </head> <body> <p class="not-supported">It looks like your browser doesn't support :has yet!</p> <p class="intro">Hover the squares to see a nice folding effect.</p> <div class="container"> <div class="row"> <div class="item"> <span></span> </div> <div class="item"> <span></span> </div> <div cla.........完整代码请登录后点击上方下载按钮下载查看
网友评论0