Skip to content

Instantly share code, notes, and snippets.

@ruicky

ruicky/book.html

Created August 12, 2022 06:58
Show Gist options
  • Save ruicky/3cf7f0b7ffcbbe8f74f779ebb4c4faf7 to your computer and use it in GitHub Desktop.
Save ruicky/3cf7f0b7ffcbbe8f74f779ebb4c4faf7 to your computer and use it in GitHub Desktop.
Download ZIP
书籍图片展示
Raw
book.html
<!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>book</title>
<style>
:root {
--sf-img-2: url("./2.jpeg");
}
body {
margin: 0;
}
.wh-container {
display: flex;
border-radius: 3px;
overflow: hidden;
width: 100%;
}
.book-cover {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
.book-cover .paper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.book-cover .cover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.02) 50%, rgba(0, 0, 0, .3));
}
.book-cover .paper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.15) 70%, rgba(0, 0, 0, .1));
}
.book-cover .cover .paper {
mix-blend-mode: hard-light;
opacity: 0.2;
overflow: hidden;
}
.paper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: url(#book-cover-paper-1);
}
.book-cover .book {
position: relative;
margin-top: -1vh;
margin-right: -1vh;
width: 32%;
max-width: 600px;
font-size: 0;
box-shadow: -55px 40px 30px 0 rgb(0 0 0 / 10%), -27px 25px 35px -5px rgb(0 0 0 / 20%), -10px 10px 15px 5px rgb(0 0 0 / 10%), -12px 12px 10px 0 rgb(0 0 0 / 20%), -7px 7px 8px 0 rgb(0 0 0 / 10%), -5px 5px 5px 0 rgb(0 0 0 / 20%), -2px 2px 3px 0 rgb(0 0 0 / 30%);
filter: drop-shadow(-20px 20px 15px rgba(0, 0, 0, .65));
}
.book-cover .cover {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.book-cover .cover img {
border-radius: 2px;
}
.book-cover .corner {
filter: blur(1px);
}
.book-cover .book::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-repeat: no-repeat;
background-image:
linear-gradient(to right, rgba(0,0,0,0.1) 0.3%, rgba(255,255,255,0.09) 4%, transparent 1.3%),
linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(255,255,255,0.08) 0%, transparent 0.5%);
background-position: 0% top, 9% top;
}
img {
background-blend-mode: normal !important;
background-clip: content-box !important;
background-position: 50% 50% !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image: var(--sf-img-2) !important;
background-size: 100% 100% !important;
background-origin: content-box !important;
background-repeat: no-repeat !important;
max-width: 100%;
}
svg {
display: block;
}
</style>
</head>
<body>
<div class="wh-container" style="width:100%">
<div class="book-cover">
<div class="paper"></div>
<div class="book">
<div class="cover">
<img
src="data:image/svg+xml,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;1080&quot; height=&quot;1490&quot;><rect fill-opacity=&quot;0&quot;/></svg>">
<div class="paper"></div>
</div>
<img
src="data:image/svg+xml,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;1080&quot; height=&quot;1490&quot;><rect fill-opacity=&quot;0&quot;/></svg>"
class="corner">
</div>
</div>
</div>
<svg width=0 height=0>
<filter id=book-cover-paper-1>
<feturbulence type=fractalNoise baseFrequency=".95 .95" numOctaves=80 result=noise></feturbulence>
<fediffuselighting in=noise lighting-color=#fffdfa surfaceScale=.8 result=grind>
<fedistantlight azimuth=500 elevation=50></fedistantlight>
</fediffuselighting>
<fegaussianblur in=grind stdDeviation=.5></fegaussianblur>
</filter>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment