html的div内换页,切换两个div的翻页效果
时间: 2024-03-14 22:46:33 浏览: 182
可以使用CSS3的动画效果来实现两个div的翻页效果。具体实现方法如下:
1.在HTML中定义两个div,分别用于显示不同的内容。
```
<div class="page1">
<!-- 第一页内容 -->
</div>
<div class="page2">
<!-- 第二页内容 -->
</div>
```
2.使用CSS3定义动画效果,实现两个div的切换。
```
.page1 {
animation: page1 1s forwards;
}
.page2 {
animation: page2 1s forwards;
}
@keyframes page1 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-180deg);
}
}
@keyframes page2 {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
```
3.使用JavaScript控制两个div的显示和隐藏。
```
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
// 点击按钮显示第二页
document.querySelector('.btn').addEventListener('click', function() {
page1.style.display = 'none';
page2.style.display = 'block';
});
// 点击按钮显示第一页
document.querySelector('.btn-back').addEventListener('click', function() {
page1.style.display = 'block';
page2.style.display = 'none';
});
```
这样就可以实现两个div的翻页效果了。当点击按钮时,第一个div会旋转到背面隐藏,同时第二个div会从背面旋转过来显示。当点击返回按钮时,两个div会反向旋转到原来的位置。
阅读全文