用 HTML CSS 实现点击打开文件效果cid1036-web前端设计

pageflip.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>pageflip effect</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <style>
     * {
   margin: 0;
   box-sizing: border-box;
   padding: 0;
}
 html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background:#009688;
}
 .wrapper {
   width: 100%;
   height: 100%;
   -webkit-perspective: 2000px;
   padding: 5%;
   perspective: 2000px;
   display: flex;
   justify-content: center;
   align-items: center;
}
 .left, .middle, .right {
   float: left;
   position: relative;
   height: 100%;
   background-color: #fff;
   width: 33%;
   max-width: 300px;
   max-height: 400px;
}
 .left, .right {
   transition: 0.7s ease-in-out;
}
 .left.open, .right.open {
   transform: rotateY(0deg);
   transition: 0.7s ease-in-out;
}
 .left {
   z-index: 20;
   transform: rotateY(180deg);
   transform-origin: 100% 50%;
}
 .right {
   transform: rotateY(-180deg);
   transform-origin: 0% 50%;
}
 .front, .back {
   height: 100%;
   width: 100%;
   position: absolute;
   background-color: #fff;
   top: 0;
}
 .front {
   transform: rotateY(180deg);
   z-index: 5;
}
 .back {
   background-color: #fff;
   z-index: 4;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}
 .back.open {
   z-index: 10;
}
 .openB {
   background-color: #009688;
   border: 2px solid #009688;
   padding: 5px;
     position: absolute;
   min-width: 120px;
   max-width: 150px;
   z-index: 50;
   bottom: 30px;
   font-weight: 300;
   font-size: 1em;	  
   transition: 0.2s ease-in-out;
   cursor: pointer;
     border-radius: 50px;
     color: white;
}
 .openB:hover {
   background-color: #009688;
   color: white;
   transition: 0.2s ease-in-out;
     outline: none;
}
 .closeB {
   position: absolute;
   border: none;
   background-color: rgba(0, 0, 0, 0.4);
   color: white;
   z-index: 50;
   width: 30px;
   font-size: 1em;
   cursor: pointer;
   height: 30px;
   top: 10px;
   right: 10px;
   border-radius: 50%;
   display: none;
}
 .closeB:hover {
   background-color: rgba(0, 0, 0, 0.2);
   transition: 0.2s ease-in-out;
}
 .preview {
   max-height: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   content: "";
   position: relative;
   display: block;
}
 .preview:before {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   background: linear-gradient(transparent, white);
}
 .sectionWrap {
   height: 100%;
   width: 100%;
   padding: 40px;
   box-sizing: border-box;
   overflow: hidden;
}
 h1 {
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 2.1em;
   line-height: 1;
   color: #34495e;
     font-weight: 300;
}
 p {
   font-family: 'Roboto Condensed', sans-serif;
   font-size: 1.1em;
   max-height: 100px;
   text-overflow: clip;
}
  
    
    
    
    </style>
</head>
<body>
    <div class="wrapper">
  
  <div class="left">
    <div class="front">
      <div class="sectionWrap">
        <h1>PAGE FLIP EFFECT</h1>
      <br>
        <p class="preview">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
        <button class="openB"><p>Read more...</p></button>
      </div>
    </div>
    <div class="back">
      <div class="sectionWrap">
      <h1>FIRST</h1>
        <br><br>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
      </div>
    </div>
  </div>
  <div class="middle">
    <div class="sectionWrap">
      <h1>SECOND</h1>
        <br><br>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
    </div>
  </div>
  <div class="right">
      <div class="sectionWrap">
      <h1>THIRD</h1>
        <br><br>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</p>
      </div>
    <button class="closeB">?</button>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(function(){
  $(".openB").click(function(){
    $(".left").addClass("open");
    setTimeout(function(){
      $(".right").addClass("open");
    }, 250);
    setTimeout(function(){
      $(".back").addClass("open");
    }, 350);
    $(".closeB").delay(1000).fadeIn();
  });

  $(".closeB").click(function(){
    setTimeout(function(){
      $(".left").removeClass("open");
    }, 250);
    $(".right").removeClass("open");
    setTimeout(function(){
      $(".back").removeClass("open");
    }, 600);
    $(".closeB").fadeOut();
  });
});

    
</script>
</body>
</html>

让链接同时具备两种打开方式