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

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

核心属性

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

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

查看所有标签

猜你喜欢:

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

码农书籍

算法详解（卷1）——算法基础

[美]蒂姆·拉夫加登（Tim Roughgarden） / 徐波 / 人民邮电出版社 / 2019-1-1 / 49

算法是计算机科学领域最重要的基石之一。算法是程序的灵魂，只有掌握了算法，才能轻松地驾驭程序开发。算法详解系列图书共有4卷，本书是第1卷——算法基础。本书共有6章，主要介绍了4个主题，它们分别是渐进性分析和大O表示法、分治算法和主方法、随机化算法以及排序和选择。附录A和附录B简单介绍了数据归纳法和离散概率的相关知识。本书的每一章均有小测验、章末习题和编程题，这为读者的自我检查以及进一步学习提......一起来看看《算法详解（卷1）——算法基础》这本书的介绍吧!

码农工具

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

核心属性

相关知识

算法详解（卷1）——算法基础

HTML 压缩/解压工具

图片转BASE64编码

随机密码生成器