先上效果!
在这个视觉为王的时代，网站的第一屏图片效果尤为关键。一个引人注目的相册放大图片效果不仅能立即吸引访客的注意力，还能提升品牌形象。
代码如下
<div class="wrapper"> <div class="items"> <div class="item" tabindex="0" style="background-image: url(https://k.sinaimg.cn/n/sinakd20115/41/w1024h2217/20240406/fa61-836c1e3fe0a39fa9b841b05a6479add9.jpg/w700d1q75cms.jpg)"></div> <div class="item" tabindex="0" style="background-image: url(https://img2.baidu.com/it/u=2662780423,1848319877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889)"></div> <div class="item" tabindex="0" style="background-image: url(https://img1.baidu.com/it/u=1822040938,662611863&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1201)"></div> <div class="item" tabindex="0" style="background-image: url(https://img2.baidu.com/it/u=2662780423,1848319877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889)"></div> <div class="item" tabindex="0" style="background-image: url(https://n.sinaimg.cn/sinakd20106/600/w1920h1080/20220910/d7b4-bd6c39bbca438f203dbb07f13d709e74.jpg)"></div> <div class="item" tabindex="0" style="background-image: url(https://img2.baidu.com/it/u=2662780423,1848319877&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889)"></div> <div class="item" tabindex="0" style="background-image: url(https://img1.baidu.com/it/u=167112264,2214778306&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800)"></div> <div class="item" tabindex="0" style="background-image: url(https://p2.itc.cn/q_70/images03/20210208/eedbb0ea63d041adb1a94f0bbc721f94.jpeg)"></div> <div class="item" tabindex="0" style="background-image: url(https://pic3.zhimg.com/50/v2-7fce7f53fd8dc4d5c87a333d1da15bf6_hd.jpg)"></div> <div class="item" tabindex="0" style="background-image: url(https://img0.baidu.com/it/u=1751786893,3026131290&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200)"></div> <div class="item" tabindex="0" style="background-image: url(https://pic1.zhimg.com/v2-fbe957fcc055e34ebc949ef3fdb560ee_r.jpg?source=1940ef5c)"></div> <div class="item" tabindex="0" style="background-image: url(https://n.sinaimg.cn/sinacn21/500/w1200h900/20180324/0325-fysnevm7150027.jpg)"></div> <div class="item" tabindex="0" style="background-image: url(https://wx3.sinaimg.cn/large/007xWHp9ly1gr0hpovb0fj30qo0qoaqw.jpg5)"></div> </div> </div> * { margin: 0; padding: 0; box-sizing: border-box; } :root{ --index: calc(1vw + 1vh); --transition: cubic-bezier(.1, .7, 0, 1); } body{ background-color: #141414; } .wrapper{ display: flex; align-items: center; justify-content: center; height: 100vh; } .items{ display: flex; gap: 0.4rem; perspective: calc(var(--index) * 35); } .item{ width: calc(var(--index) * 3); height: calc(var(--index) * 12); background-color: #222; background-size: cover; background-position: center; cursor: pointer; filter: grayscale(1) brightness(.5); transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition); will-change: transform, filter, rotateY, width; } .item::before, .item::after{ content: ''; position: absolute; height: 100%; width: 20px; right: calc(var(--index) * -1); } .item::after{ left: calc(var(--index) * -1); } .items .item:hover{ filter: inherit; transform: translateZ(calc(var(--index) * 10)); } /*Right*/ .items .item:hover + *{ filter: inherit; transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg); z-index: -1; } .items .item:hover + * + *{ filter: inherit; transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg); z-index: -2; } .items .item:hover + * + * + *{ filter: inherit; transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg); z-index: -3; } .items .item:hover + * + * + * + *{ filter: inherit; transform: translateZ(calc(var(--index) * .6)) rotateY(15deg); z-index: -4; } /*Left*/ .items .item:has( + :hover){ filter: inherit; transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg); } .items .item:has( + * + :hover){ filter: inherit; transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg); } .items .item:has( + * + * + :hover){ filter: inherit; transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg); } .items .item:has( + * + * + * + :hover){ filter: inherit; transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg); } .items .item:active, .items .item:focus { width: 28vw; filter: inherit; z-index: 100; transform: translateZ(calc(var(--index) * 10)); margin: 0 .45vw; }
