HTML+CSS 视觉冲击实现相册图片的放大效果，让网站首页更震撼！

先上效果!

（效果实际是动画的，图是静态的而已）

---

🌟 在这个视觉为王的时代，网站的第一屏图片效果尤为关键。一个引人注目的相册放大图片效果不仅能立即吸引访客的注意力，还能提升品牌形象。 

代码如下 

<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;
}

---

  综上，效果实现了, 后续有什么想要的欢迎大家留言，也可以加喔微信, 18634371151,欢迎~

  往期精彩，可以关注博主看左侧专栏，一定有你需要的！！！

🌟 关注耀南.，探索更多精彩的动画效果！🚀