赞
踩
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <style>
- body {
- background-color: #ccc;
- }
- .book {
- width: 400px;
- height: 600px;
- margin:100px auto 50px;
- transform-style: preserve-3d;
- /* 近大远小效果 */
- perspective: 1200px;
- /* position: relative; */
- }
- img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- }
- #page1,#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9{
-
- position: relative;
- transition: all .5s;
- transform-origin: left;
- transform-style: preserve-3d;
- left:0;
- top:0;
- }
- #page1 {
- z-index: 9;
- }
- #page2{
- z-index: 8;
- }
- #page3{
- z-index: 7;
- }
- #page4{
- z-index: 6;
- }
- #page5 {
- z-index: 5;
- }
- #page6{
- z-index: 4;
- }
- #page7{
- z-index: 3;
- }
- #page8{
- z-index: 2;
- }
- #page9{
- z-index: 1;
- }
- .page-front {
- position: absolute;
- background-color: greenyellow;
- left: 0;
- top:0;
- width: 400px;
- height: 600px;
- border:8px solid #fff;
- box-sizing: border-box;
- font-size: 28px;
- line-height: 300px;
- text-align: center;
- backface-visibility: hidden;
-
- }
- .page-back {
- width: 400px;
- height: 600px;
- box-sizing: border-box;
- border:8px solid #fff;
- position: absolute;
- background-color: #EEE;
- left: 0;
- top:0;
- }
- .class-group-btn {
- display: flex;
- width: 200px;
- justify-content: space-between;
- margin:auto;
- }
- .class-group-btn>div{
- overflow: hidden;
- width: 200px;
- position: relative;
- background: lightpink;
- height: 60px;
- line-height: 60px;
- text-align: center;
- transition: all .5s;
- }
- .class-group-btn>div:hover {
- background-color: #fff;
- }
- .class-group-btn>div:hover a {
- color:purple;
- }
- .class-group-btn>div:hover .border-top {
- right: 0px;
- }
- .class-group-btn>div:hover .border-bottom {
- left: 0px;
- }
- .class-group-btn>div>a {
- text-decoration: none;
- color: dodgerblue;
- font-size: 28px;
- }
- .border-top {
- position: absolute;
- background-color: greenyellow;
- top:0px;
- right:-200px;
- height: 8px;
- width: 200px;
- transition: all .5s;
- }
- .border-bottom {
- position: absolute;
- background-color: greenyellow;
- transition: all .5s;
- bottom:0px;
- height: 8px;
- left: -200px;
- width: 200px;
- }
- </style>
- <body>
- <div class="book">
- <div id="page1">
- <div class="page-back"></div>
- <div class="page-front">
- HTML5
- </div>
- </div>
- <div id="page2">
- <div class="page-back"></div>
- <div class="page-front">CSS3</div>
- </div>
- <div id="page3">
- <div class="page-back"></div>
- <div class="page-front">JAVASCRIPT</div>
- </div>
- <div id="page4">
- <div class="page-back"></div>
- <div class="page-front">JAVAEE</div>
- </div>
- <div id="page5">
- <div class="page-back"></div>
- <div class="page-front">ORACLE</div>
- </div>
- <div id="page6">
- <div class="page-back"></div>
- <div class="page-front">SQLSERVER</div>
- </div>
- <div id="page7">
- <div class="page-back"></div>
- <div class="page-front">SOLR</div>
- </div>
- <div id="page8">
- <div class="page-back"></div>
- <div class="page-front">MONGDB</div>
- </div>
- <div id="page9">
- <div class="page-back"></div>
- <div class="page-front">LINUX</div>
- </div>
- </div>
- <div class="class-group-btn">
- <div>
- <div class="border-top"></div>
- <a href="#" class="clickme">点我翻页</a>
- <div class="border-bottom"></div>
- </div>
- <!-- <div>
- <div class="border-top"></div>
- <a href="javascript(0)">HTML5</a>
- <div class="border-bottom"></div>
- </div>
- <div>
- <div class="border-top"></div>
- <a href="javascript(0)">JAVASCRIPT</a>
- <div class="border-bottom"></div>
- </div> -->
-
- </div>
- </body>
- <script>
- var book = document.querySelector('.clickme')
- var index = 0
- var pagedom = document.querySelectorAll("[id^='page']")
- book.onclick = function(){
- if(index < pagedom.length -1 ){
- pagedom[index].style.transform = "rotateY(-145deg)";
- index++
- } else {
- //
- for (let i = 0; i < pagedom.length; i++) {
- // setTimeout(_=>{
- pagedom[i].style.transform = "rotateY(0deg)";
- // },i*100)
-
- }
- index = 0
- }
- }
- </script>
- </html>
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。