用 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>

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

获取源码: pageflip
下载数:218人次, 文件大小: 0, 上传日期: 2020年-4月-22日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

1,302 人查阅

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
下载 (4)

您需要先支付 6元 才能查看此处内容!立即支付