CSS 练习 翻页效果

例子一:翻页样式
在这里插入图片描述
制作思路:

  1. 创建结构:ul.pagenation>(li>a{$})*11,按tab键快速建立。再逐个修改内容。
  2. 去掉ul原本样式:list-style: none;,设定外面盒子的样式
.pagenation{
   
			list-style: none;
			padding: 0;
			width: 600px;
			height: 40px;
			border:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用CSS3实现翻页效果可以使用`transform`属性和`transition`属性来实现。以下是一个简单的实现翻页效果CSS代码: HTML部分: ```html <div class="book"> <div class="page">第一页的内容</div> <div class="page">第二页的内容</div> <div class="page">第三页的内容</div> <div class="page">第四页的内容</div> </div> ``` CSS部分: ```css .book { width: 300px; height: 200px; perspective: 1000px; /* 设置3D视角 */ position: relative; } .page { width: 300px; height: 200px; position: absolute; top: 0; left: 0; transform-style: preserve-3d; /* 保留3D变换 */ backface-visibility: hidden; /* 隐藏背面 */ transition: transform 1s ease-in-out; /* 设置过渡效果 */ } .page:nth-child(1) { transform: rotateY(0deg); /* 第一页的旋转角度 */ } .page:nth-child(2) { transform: rotateY(-90deg); /* 第二页的旋转角度 */ } .page:nth-child(3) { transform: rotateY(-180deg); /* 第三页的旋转角度 */ } .page:nth-child(4) { transform: rotateY(-270deg); /* 第四页的旋转角度 */ } ``` JavaScript部分: ```javascript const book = document.querySelector('.book'); let currentPage = 1; function nextPage() { if (currentPage < 4) { currentPage++; book.style.transform = `rotateY(${-90 * currentPage}deg)`; } } function prevPage() { if (currentPage > 1) { currentPage--; book.style.transform = `rotateY(${-90 * currentPage}deg)`; } } document.addEventListener('keydown', (event) => { if (event.keyCode === 37) { prevPage(); // 按左箭头键翻到上一页 } if (event.keyCode === 39) { nextPage(); // 按右箭头键翻到下一页 } }); ``` 这段代码实现了一个简单的翻页效果。通过旋转`book`元素,实现了页面的翻转效果。通过设置`transition`属性,使得翻页过程有过渡效果。通过JavaScript的`keydown`事件监听,可以通过按左箭头键或右箭头键来翻到上一页或下一页。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值