纯css实现三维悬空照片堆叠点击打开放大照片lightbox效果代码
代码语言：html
所属分类：图片放大
代码描述：纯css实现三维悬空照片堆叠点击打开放大照片lightbox效果代码
代码标签： css 三维 悬空 照片 堆叠 放大 照片 lightbox
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Poppins", sans-serif;
transform-style: preserve-3d;
}
body,
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
background: dodgerblue;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0;
perspective: 12in;
perspective-origin: 50% 50%;
animation: perspective 10s linear infinite;
animation-delay: 1s;
}
@keyframes perspective {
0% {
perspective-origin: 50% 50%;
perspective: 12in;
}
25% {
perspective-origin: 20% 30%;
perspective: 15in;
}
75% {
perspective-origin: 80% 70%;
perspective: 15in;
}
100% {
perspective-origin: 50% 50%;
perspective: 12in;
}
}
.surface {
position: relative;
background: transparent;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300%;
height: 300%;
left: -100%;
transform: rotateX(90deg) translateZ(-2.5in) translateY(-1in);
}
.surface .background {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #362000;
background-image: url("//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png");
background-position: center;
transform: translateZ(-1.02in) translateX(1in);
filter: blur(0.01in);
}
.surface .background::after {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: radial-gradient(
circle,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 90%,
rgba(0, 0, 0, 1) 100%
);
border-radius: 50%;
}
.surface .card {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 3.5in;
height: 2in;
background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png");
background-position: center !important;
background-size: contain !important;
background-repeat: no-repeat !important;
transform: translateX(0.5in) rotateX(-30deg) rotateY(-10deg) rotateZ(-60deg);
outline: 0.01in solid transparent;
outline-offset: 0in;
transition: all 0.3s ease-in-out;
}
.surface .card p {
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 0.1in;
font-size: 12pt;
line-height: 22pt;
font-weight: 500;
margin: 0;
}
.surface .card svg {
background: rgba(255, 255, 255, 0.7);
width: 2in;
height: auto;
padding: 0.2in;
border-radius: 0.5in;
}
.surface .card:nth-child(2) {
background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png");
transform: translateZ(1.4in) translateX(-2in) rotateX(-25deg) rotateY(40deg)
rotateZ(-60deg);
}
.surface .card:nth-child(3) {
background: url("//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png");
transform: translateZ(3.1in) translateX(-0.25in) rotateX(-70deg) rotateY(0deg)
rotateZ(-60deg);
}
.surface .card:nth-child(4) {
background: url("//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png");
transform: translateZ(4.5in) translateX(-0.8in) translateY(0.6in)
rotateX(-80deg) rotateY(0deg) rotateZ(-20deg);
}
.surface .card:nth-child(5) {
background: url("//repo.bfw.wiki/bfwrepo/image/5fb34b3c1322f.png");
transform: translateZ(5.8in) translateX(1.4in) translateY(-0.7in)
rotateX(-70deg) rotateY(0deg) rotateZ(15deg);
}
.surface .card:nth-child(6) {
background: url("//repo.bfw.wiki/bfwrepo/image/5fb34b65ae8bb.png");
transform: translateZ(2in) translateX(1.7in) translateY(-0.7in)
rotateX(-60deg) rotateY(25deg);
}
.surface .card:nth-child(1)::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: black;
transform: rotateZ(20deg) rotateY(27deg) rotateX(17deg) translateX(0.3in)
translateY(0.5in) translateZ(-1in);
filter: blur(0.5in);
opacity: 0.8;
}
.surface .card:nth-child(2)::after {
position: absolute;
top: 0.4in;
right: 0.4in;
width: 30%;
height: 50%;
content: "";
background: black;
filter: blur(0.6in);
opacity: 0.7;
}
.card div {
position: absolute;
background: #eee;
transform-origin: 50% 50%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card .back {
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: translateZ(-0.035in) rotateX(180deg);
}
.card .bottom {
width: 3.485in;
height: 0.035in;
transform: rotateX(-90deg) translateZ(1in) translateX(-0.01in);
}
.card .top {
width: 3.485in;
height: 0.035in;
transform: rotateX(90deg) translateZ(0.97in) translateX(-0.01in);
}
.card .left {
width: 1.97in;
height: 0.035in;
transform: rotateX(-90deg) rotateY(-90deg) translateZ(1.75in)
translateX(0.02in);
}
.card .right {
width: 1.97in;
height: 0.035in;
transform: rotateX(-90deg) rotateY(90deg) translateZ(1.75in)
translateX(-0.02in);
}
.surface .card:hover {
outline: 0.04in solid white;
outline-offset: 0.2in;
transition: all 0.3s ease-in-out;
}
.surface .card .menu {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
visibility: hidden;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: all 0.3s ease-in-out;
}
.surface .card .menu label {
padding: 0.2in 0.25in;
background: dodgerblue;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 0.1in;
text-decoration: none;
font-size: 14pt;
line-height: 28pt;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
rgba(0, 0, 0, 0.22) 0px 15px 12px;
transition: all 0.3s ease-in-out;
}
label:hover {
cursor: pointer;
}
.surface .card .menu label:hover {
background: #888;
border-radius: 0.3in;
font-size: 16pt;
transition: all 0.3s ease-in-out;
}
.surface .card:hover .menu {
visibility: visible;
opacity: 1;
transition: all 0.3s ease-in-out;
}
body > input {
display: none;
}
body > img {
position: fixed;
align-self: flex-end;
margin-bottom: 0.4in;
height: 70%;
width: auto;
visibility: hidden;
opacity: 0;
z-index: 2;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
rgba(0, 0, 0, 0.22) 0px 15px 12px;
transition: all 0.3s ease-in-out;
}
.lightbox-backdrop {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
visibility: hidden;
opacity: 0;
z-index: 1;
transition: all 0.3s ease-in-out;
}
#close-button {
width: 0.6in;
height: 0.6in;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
top: 15%;
background: white;
border-radius: 0.1in;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
rgba(0, 0, 0, 0.22) 0px 15px 12px;
z-index: 2;
}
#close-button::after {
position: absolute;
width: 1.5in;
height: auto;
padding: 0.1in 0in;
bottom: 110%;
content: "TAP TO CLOSE";
background: black;
color: white;
font-size: 12pt;
line-height: 24pt;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 0.1in;
}
#close-button svg {
width: 80%;
height: auto;
fill: black;
transition: all 0.2s ease-in-out;
}
#close-button:hover svg {
transform: rotateZ(180deg);
transition: all 0.2s ease-in-out;
}
#close-button,
#close-lbox:checked ~ img,
#close-lbox:checked ~ #close-button {
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
body > input:checked ~ #close-button,
#bcard-1-img:checked ~ #bcard-1-ent,
#bcard-2-img:checked ~ #bcard-2-ent,
#bcard-3-img:checked ~ #bcard-3-ent,
#bcard-4-img:checked ~ #bcard-4-ent,
#bcard-5-img:checked ~ #bcard-5-ent,
#bcard-6-img:checked ~ #bcard-6-ent,
#bcard-1-img:checked ~ .lightbox-backdrop,
#bcard-2-img:checked ~ .lightbox-backdrop,
#bcard-3-img:checked ~ .lightbox-backdrop,
#bcard-4-img:checked ~ .lightbox-backdrop,
#bcard-5-img:checked ~ .lightbox-backdrop,
#bcard-6-img:checked ~ .lightbox-backdrop {
visibility: visible;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.tooltip {
position: fixed;
top: 0.3in;
right: 0.5in;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tooltip p {
color: white;
font-size: 12pt;
line-height: 24pt;
font-weight: 500;
text-shadow: 1px 1px 5px black;
text-decoration: underline;
}
@media (max-height: 670px) {
.surface {
transform: rotateX(90deg) translateZ(-2.5in) translateY(-4in);
}
#close-button {
top: 10%;
}
}
@media (min-height: 590px) and (max-height: 670px) {
.surface {
transform: rotateX(90deg) translateZ(-2.5in) translateY(-2in);
}
}
@media (max-height: 520px) {
#close-button {
top: 15%;
}
body > img {
margin-bottom: 0px;
}
}
</style>
</head>
<body>
<div class="surface">
<div class="card">
<svg id="logo-51" width="167" height="41" viewBox="0 0 167 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.6307 28.7936H60.5827V25.1936H52.8787V11.6336H48.6307V28.7936Z" class="cneutral" fill="#2F234F"></path>
<path d="M67.6639 26.3936C65.9599 26.3936 65.0719 24.9056 65.0719 22.6736C65.0719 20.4416 65.9599 18.9296 67.6639 18.9296C69.3679 18.9296 70.2799 20.4416 70.2799 22.6736C70.2799 24.9056 69.3679 26.3936 67.6639 26.3936ZM67.6879 29.1776C71.6479 29.1776 74.2399 26.3696 74.2399 22.6736C74.2399 18.9776 71.6479 16.1696 67.6879 16.1696C63.7519 16.1696 61.1119 18.9776 61.1119 22.6736C61.1119 26.3696 63.7519 29.1776 67.6879 29.1776Z" class="cneutral" fill="#2F234F"></path>
<path d="M81.0943 33.0416C82.9183 33.0416 84.5263 32.6336 85.6063 31.6736C86.5903 30.7856 87.2383 29.4416 87.2383 27.5936V16.5056H83.4943V17.8256H83.4463C82.7263 16.7936 81.6223 16.1456 79.9903 16.1456C76.9423 16.1456 74.8303 18.6896 74.8303 22.2896C74.8303 26.0576 77.3983 28.1216 80.1583 28.1216C81.6463 28.1216 82.5823 27.5216 83.3023 26.7056H83.3983V27.9296C83.3983 29.4176 82.7023 30.2816 81.0463 30.2816C79.7503 30.2816 79.1023 29.7296 78.8863 29.0816H75.0943C75.4783 31.6496 77.7103 33.0416 81.0943 33.0416ZM81.0703 25.2176C79.6063 25.2176 78.6463 24.0176 78.6463 22.1696C78.6463 20.2976 79.6063 19.0976 81.0703 19.0976C82.7023 19.0976 83.5663 20.4896 83.5663 22.1456C83.5663 23.8736 82.7743 25.2176 81.0703 25.2176Z" class="cneutral" fill="#2F234F"></path>
<path d="M94.9367 26.3936C93.2327 26.3936 92.3447 24.9056 92.3447 22.6736C92.3447 20.4416 93.2327 18.9296 94.9367 18.9296C96.6407 18.9296 97.5527 20.4416 97.5527 22.6736C97.5527 24.9056 96.6407 26.3936 94.9367 26.3936ZM94.9607 29.1776C98.9207 29.1776 101.513 26.3696 101.513 22.6736C101.513 18.9776 98.9207 16.1696 94.9607 16.1696C91.0247 16.1696 88.3847 18.9776 88.3847 22.6736C88.3847 26.3696 91.0247 29.1776 94.9607 29.1776Z" class="cneutral" fill="#2F234F"></path>
<path d="M102.655 28.7936H106.567V16.5056H102.655V28.7936ZM102.655 14.8016H106.567V11.6336H102.655V14.8016Z" class="cneutral" fill="#2F234F"></path>
<path d="M108.264 32.8496H112.176V27.5216H112.224C112.992 28.5536 114.12 29.1776 115.704 29.1776C118.92 29.1776 121.056 26.6336 121.056 22.6496C121.056 18.9536 119.064 16.1456 115.8 16.1456C114.12 16.1456 112.92 16.8896 112.08 17.9936H112.008V16.5056H108.264V32.8496ZM114.696 26.1536C113.016 26.1536 112.056 24.7856 112.056 22.7936C112.056 20.8016 112.92 19.2896 114.624 19.2896C116.304 19.2896 117.096 20.6816 117.096 22.7936C117.096 24.8816 116.184 26.1536 114.696 26.1536Z" class="cneutral" fill="#2F234F"></path>
<path d="M127.426 29.1776C130.642 29.1776 133.018 27.7856 133.018 25.0976C133.018 21.9536 130.474 21.4016 128.314 21.0416C126.754 20.7536 125.362 20.6336 125.362 19.7696C125.362 19.0016 126.106 18.6416 127.066 18.6416C128.146 18.6416 128.89 18.9776 129.034 20.0816H132.634C132.442 17.6576 130.57 16.1456 127.09 16.1456C124.186 16.1456 121.786 17.4896 121.786 20.0816C121.786 22.9616 124.066 23.5376 126.202 23.8976C127.834 24.1856 129.322 24.3056 129.322 25.4096C129.322 26.2016 128.578 26.6336 127.402 26.6336C126.106 26.6336 125.29 26.0336 125.146 24.8096H121.45C121.57 27.5216 123.826 29.1776 127.426 29.1776Z" class="cneutral" fill="#2F234F"></path>
<path d="M138.331 29.1536C140.035 29.1536 141.115 28.4816 142.003 27.2816H142.075V28.7936H145.819V16.5056H141.907V23.3696C141.907 24.8336 141.091 25.8416 139.747 25.8416C138.499 25.8416 137.899 25.0976 137.899 23.7536V16.5056H134.011V24.5696C134.011 27.3056 135.499 29.1536 138.331 29.1536Z" class="cneutral" fill="#2F234F"></path>
<path d="M147.521 28.7936H151.433V21.9056C151.433 20.4416 152.153 19.4096 153.377 19.4096C154.553 19.4096 155.105 20.1776 155.105 21.4976V28.7936H159.017V21.9056C159.017 20.4416 159.713 19.4096 160.961 19.4096C162.137 19.4096 162.689 20.1776 162.689 21.4976V28.7936H166.601V20.8016C166.601 18.0416 165.209 16.1456 162.425 16.1456C160.841 16.1456 159.521 16.8176 158.561 18.3056H158.513C157.889 16.9856 156.665 16.1456 155.057 16.1456C153.281 16.1456 152.105 16.9856 151.337 18.2576H151.265V16.5056H147.521V28.7936Z" class="cneutral" fill="#2F234F"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.65417 3.89149C7.22351 4.89185 5.92981 6.0746 4.80676 7.40602C9.39606 6.97995 15.2266 7.67567 21.9958 11.0603C29.2244 14.6745 35.0452 14.7967 39.0962 14.0153C38.7286 12.9024 38.2658 11.8328 37.7177 10.816C33.0804 11.3051 27.1354 10.6577 20.207 7.1936C15.8074 4.9938 11.9292 4.08763 8.65417 3.89149ZM35.0088 6.96027C31.3467 2.86862 26.0248 0.293625 20.1014 0.293625C18.3619 0.293625 16.6741 0.515732 15.0651 0.933105C17.2443 1.52771 19.5593 2.39761 21.9958 3.61589C27.0684 6.15215 31.4478 6.96878 35.0088 6.96027ZM39.9623 17.9217C35.0683 18.8881 28.3102 18.6896 20.207 14.638C12.6314 10.8502 6.60187 10.8979 2.53534 11.8016C2.32544 11.8482 2.12048 11.8972 1.92047 11.9482C1.38806 13.1061 0.963074 14.3237 0.658142 15.5881C0.983826 15.5011 1.32037 15.4184 1.6676 15.3412C6.60101 14.2449 13.5715 14.2925 21.9958 18.5047C29.5715 22.2925 35.601 22.2448 39.6676 21.3411C39.8069 21.3102 39.9442 21.2782 40.0792 21.2452C40.094 20.9299 40.1014 20.6126 40.1014 20.2936C40.1014 19.4911 40.0542 18.6996 39.9623 17.9217ZM39.4262 25.4659C34.5797 26.3132 28.0184 25.988 20.207 22.0824C12.6314 18.2946 6.60187 18.3423 2.53534 19.246C1.63269 19.4465 0.820679 19.6908 0.10437 19.9487C0.102417 20.0634 0.10144 20.1784 0.10144 20.2936C0.10144 31.3393 9.05573 40.2936 20.1014 40.2936C29.3585 40.2936 37.1467 34.0045 39.4262 25.4659Z" class="ccustom" fill="#7F57F1"></path>
</svg>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back"></div>
<div class="menu">
<label for="bcard-1-img">View Full Size</label>
</div>
</div>
<div class="card">
<svg id="logo-44" width="172" height="40" viewBox="0 0 172 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M49.0364 29H60.3891V25.7673H52.4982V10.6727H49.0364V29Z" fill="#23216E" class="ccompli2"></path>
<path d="M67.2113 29.3818C68.5859 29.3818 69.795 29.0763 70.8386 28.4654C71.8907 27.846 72.7095 26.9933 73.295 25.9073C73.8889 24.8127 74.1859 23.5527 74.1859 22.1273C74.1859 20.7103 73.8931 19.4588 73.3077 18.3727C72.7222 17.2782 71.9034 16.4212 70.8513 15.8018C69.8077 15.1824 68.5944 14.8727 67.2113 14.8727C65.8537 14.8727 64.6531 15.1782 63.6095 15.7891C62.5659 16.4 61.7471 17.2527 61.1531 18.3473C60.5592 19.4333 60.2622 20.6933 60.2622 22.1273C60.2622 23.5442 60.5507 24.8 61.1277 25.8945C61.7131 26.9806 62.5277 27.8333 63.5713 28.4527C64.615 29.0721 65.8283 29.3818 67.2113 29.3818ZM67.2113 26.1491C66.1337 26.1491 65.315 25.7885 64.755 25.0673C64.2034 24.3376 63.9277 23.3576 63.9277 22.1273C63.9277 20.9309 64.1907 19.9636 64.7168 19.2254C65.2513 18.4788 66.0828 18.1054 67.2113 18.1054C68.3059 18.1054 69.1289 18.4703 69.6804 19.2C70.2404 19.9297 70.5204 20.9054 70.5204 22.1273C70.5204 23.3067 70.2447 24.2739 69.6931 25.0291C69.1501 25.7757 68.3228 26.1491 67.2113 26.1491Z" fill="#23216E" class="ccompli2"></path>
<path d="M81.0319 29.3818C81.6768 29.3818 82.2707 29.3054 82.8138 29.1527C83.3653 29 83.8659 28.7836 84.3156 28.5036V29.8909C84.3326 30.4 84.201 30.8242 83.921 31.1636C83.6495 31.5115 83.2847 31.7703 82.8265 31.94C82.3683 32.1182 81.8804 32.2073 81.3629 32.2073C80.8792 32.2073 80.4295 32.1012 80.0138 31.8891C79.6065 31.677 79.2925 31.3673 79.0719 30.96L75.8647 32.5127C76.3907 33.4036 77.1416 34.1206 78.1174 34.6636C79.0932 35.2151 80.1665 35.4909 81.3374.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0