由 code 
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
下载数:271人次, 文件大小: 0, 上传日期: 2020年-4 月-22日
公众号回复:gcode 获取解压密码
2,064 人查阅