js实现折页特效。鼠标触碰页面右上角收缩的折页图片,展开折页图片;鼠标离开,收缩图片。
时间: 2024-03-13 13:45:21 浏览: 42
要实现这个折页特效,你可以使用以下的HTML和CSS代码来创建一个带有折页图片的页面:
```html
<div class="book">
<div class="page">
<img src="folded-page.png" alt="Folded Page" class="folded">
</div>
<div class="page">
<img src="content-page.png" alt="Content Page" class="content">
</div>
</div>
```
```css
.book {
position: relative;
width: 300px;
height: 200px;
margin: 50px auto;
perspective: 600px;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
.page:hover {
transform: rotateY(-180deg);
}
.folded {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotateY(180deg);
backface-visibility: hidden;
}
```
在这个代码中,我们创建了一个包含两页内容的书的容器`.book`,其中每一页都被包裹在`.page`元素中。每一页都是一个图片,其中一个是折页图片,另一个是内容页图片。
我们使用CSS3的`transform`属性来实现折页的效果。当鼠标悬停在页面上时,我们使用`hover`伪类来触发`.page`元素的旋转效果,从而展开折页图片。我们还使用`backface-visibility`属性来控制背面的可见性,以避免页面出现翻转时的闪烁问题。
你可以将`folded-page.png`和`content-page.png`替换为自己的图片,以实现自定义的折页特效。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)