CSS如何实现图片鼠标悬停折叠效果

tangjin

作者

这篇文章给大家分享的是有关CSS如何实现图片鼠标悬停折叠效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

CSS 实现图片鼠标悬停折叠效果

1. 实现要点

折叠是由多个块级元素来完成的;
图片是以背景图片的方式呈现出来的;
给每个块级元素设置同一张背景图片，通过background-position来控制显示的区域（类似于雪碧图）;
通过ransform属性来实现折叠效果;
整个包裹div的大小就是图片的原大小，如果更改了尺寸，需要调整background-size等属性调整背景图片大小

2. 效果展示

3. 源码

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>hover-folder</title>
<style>
html,
body,
ul,
li{
margin:0;
padding:0
}

ul{
list-style:none;
display:block;
}

body{
width:100%;
height:100vh;
}

.container{
width:100%;
height:100%;
/*background-color:aqua;*/
display:flex;
justify-content:center;
align-items:center;
transform:scale(0.5);
}

.wrap{
box-shadow:02px12px0rgba(0,0,0,.5);
width:1280px;
height:854px;
font-size:0;
line-height:0;
position:relative;

}

.image{
cursor:pointer;
}

.abs-wrap{
height:100%;
width:100%;
/*top:0;
left:0;*/
/*position:absolute;*/
z-index:10;

}

.abs-wrap:hover>.abs:nth-child(2){
transform:matrix(0.8,-0.2,0,1,-1,0);
}

.abs-wrap:hover>.abs:nth-child(3){
transform:matrix(0.8,0.2,0,1,-53,-50);
}

.abs-wrap:hover>.abs:nth-child(4){
transform:matrix(0.8,-0.2,0,1,-105,0);
}

.abs-wrap:hover>.abs:nth-child(5){
transform:matrix(0.8,0.2,0,1,-157,-50);
}

.abs{
transform-style:preserve-3d;
transform-origin:leftcenter;
transition:.4sease-in-out;
width:20%;
height:100%;
/*background-color:rgba(0,0,0,.5);*/
display:inline-block;
background-size:100%;
background:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600577868615&di=d2979a54604ecb409e3329527d0220fa&imgtype=0&src=http%3A%2F%2Ft9.baidu.com%2Fit%2Fu%3D29311073%2C358824429%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D854');
}

.abs:nth-child(1){
background-position:0%0%;
}

.abs:nth-child(2){
background-position:25%0%;
}

.abs:nth-child(3){
background-position:50%0%;
}

.abs:nth-child(4){
background-position:75%0%;
}

.abs:nth-child(5){
background-position:100%0%;
}
</style>
</head>

<body>
<divclass="container">
<divclass="wrap">
<ulclass="abs-wrap">
<liclass="abs"></li>
<liclass="abs"></li>
<liclass="abs"></li>
<liclass="abs"></li>
<liclass="abs"></li>

</ul>

</div>

</div>

</body>

</html>

感谢各位的阅读！关于“CSS如何实现图片鼠标悬停折叠效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

阅读全文

发布于 2021-03-17 20:51:17

css