|
|

楼主 |
发表于 2022-4-26 23:55
|
显示全部楼层
本帖最后由 马黑黑 于 2022-4-27 07:30 编辑
代码:- <style>
- .book {
- margin: auto;
- display: flex;
- align-items: center;
- width: 1024px;
- height: 600px;
- perspective: 1000px;
- cursor: pointer;
- padding: 10px;
- position: relative;
- background: rgba(0,0,0,.8);
- }
- .page {
- background: #ccc;
- padding: 20px;
- width: 310px;
- height: 400px;
- left: 50%;
- border-left: 1px solid #dcdcdc ;
- transform-origin: left;
- box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
- transform-style: preserve-3d;
- position: absolute;
- }
- .page span { display: block; }
- @keyframes rot1{
- from { transform: rotateY(0deg); }
- to { transform: rotateY(-180deg); }
- }
- @keyframes rot2{
- from { transform: rotateY(-180deg); }
- to { transform: rotateY(0deg); }
- }
- </style>
- <div class="book">
- <div class="page"><span>1</span></div>
- <div class="page"><span>2</span></div>
- <div class="page"><span>3</span></div>
- <div class="page"><span>4</span></div>
- </div>
- <script>
- let page = document.querySelectorAll(".page");
- let idx = 0;
- let all = page.length;
- let currentPage = 0;
- setzIdx();
- document.querySelector(".book").onclick = function(){
- if(idx == 0){ //前翻
- page[currentPage].style.animation = "rot1 .5s linear forwards";
- page[currentPage].children[0].style.transform = "rotateY(-180deg)";
- currentPage ++;
- if(currentPage == all){
- idx = 1;
- currentPage = all - 1;
- }
- setzIdx();
- } else { //后翻
- page[currentPage].style.animation = "rot2 .5s linear forwards";
- page[currentPage].children[0].style.transform = "rotateY(0deg)";
- currentPage --;
- if(currentPage < 0){
- idx = 0;
- currentPage = 0;
- }
- setzIdx();
- }
- }
- function setzIdx(){
- for(j=currentPage; j<all; j++){
- page[j].style.zIndex = all - j;
- }
- for(j=0; j<currentPage;j++) {
- page[j].style.zIndex = j + 1;
- }
- if(currentPage == all - 1) page[currentPage].style.zIndex = all;
- }
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|