图片悬停“滑动打开”动画效果

栏目: Html · 发布时间: 7年前

核心属性

overflow: hidden “滑动打开”时将超出矩形范围的图片裁剪掉

background-size: cover 背景图完全覆盖背景区域，但是可能会有部分看不到

clip-path 裁剪图片（road-to-nowhere.jpg）分别为上下两部分

hover + transition + transform: translateY( ) 鼠标悬停时图片分别上下移动自身高度的45%距离

相关知识

<base href="https://pics.codecolor.cn/sliding-door-images/">

```
<figure>
```

<figcaption><div>路无尽头</div><div>脚不停止</div></figcaption>

```
<img src="road-to-nowhere.jpg" alt="">
```
```
<img src="road-to-nowhere.jpg" alt="">
```
```
</figure>
```

```
* {
```
```
box-sizing: border-box;
```
```
}
```
```
body {
```
```
margin: 0;
```
```
background: #222;
```
```
}
```
```
figure {
```
```
position: relative;
```
```
width: 60vw;
```
```
height: 60vw;
```
```
margin: 0 auto;
```
```
overflow: hidden;
```

background-image: url(https://pics.codecolor.cn/sliding-door-images/mad-dog.jpg);

```
background-size: cover;
```
```
}
```
```
figure img {
```
```
position: absolute;
```
```
top: 0;
```
```
left: 0;
```
```
width: 100%;
```
```
transition: 2s ease-in-out;
```
```
}
```
```
figure img:first-of-type {
```

clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);

```
}
```
```
figure img:last-of-type {
```

clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);

```
}
```
```
figure:hover img:first-of-type {
```
```
transform: translateY(-45%);
```
```
}
```
```
figure:hover img:last-of-type {
```
```
transform: translateY(45%);
```
```
}
```
```
figcaption {
```
```
position: absolute;
```
```
top: 0;
```
```
width: 100%;
```
```
height: 100%;
```
```
padding-top: 12vw;
```
```
color: white;
```
```
font-size: 10vw;
```
```
text-align: center;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Concepts, Techniques, and Models of Computer Programming

Peter Van Roy、Seif Haridi / The MIT Press / 2004-2-20 / USD 78.00

This innovative text presents computer programming as a unified discipline in a way that is both practical and scientifically sound. The book focuses on techniques of lasting value and explains them p......一起来看看《Concepts, Techniques, and Models of Computer Programming》这本书的介绍吧!

码农工具

UNIX 时间戳转换

HEX HSV 转换工具

HEX HSV 互换工具