纯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 35.4909C82.3471 35.4909 83.2847 35.3551 84.1501 35.0836C85.0156 34.8206 85.7453 34.4176 86.3392 33.8745C86.9416 33.3315 87.3532 32.64 87.5738 31.8C87.6501 31.503 87.701 31.2018 87.7265 30.8963C87.7604 30.5994 87.7774 30.2812 87.7774 29.9418V15.2545H84.7483V16.0182C84.2816 15.6533 83.7513 15.3733 83.1574 15.1782C82.5719 14.9745 81.9229 14.8727 81.2101 14.8727C79.895 14.8727 78.7495 15.1867 77.7738 15.8145C76.798 16.4424 76.0386 17.3036 75.4956 18.3982C74.961 19.4842 74.6938 20.7273 74.6938 22.1273C74.6938 23.5018 74.9568 24.7363 75.4829 25.8309C76.0174 26.9254 76.7598 27.7909 77.7101 28.4273C78.6604 29.0636 79.7677 29.3818 81.0319 29.3818ZM81.5919 26.3018C80.8453 26.3018 80.2344 26.1151 79.7592 25.7418C79.2841 25.3685 78.9319 24.8679 78.7029 24.24C78.4738 23.6036 78.3592 22.8994 78.3592 22.1273C78.3592 21.3636 78.478 20.6679 78.7156 20.04C78.9532 19.4036 79.318 18.8988 79.8101 18.5254C80.3107 18.1436 80.9471 17.9527 81.7192 17.9527C82.8053 17.9527 83.5816 18.3388 84.0483 19.1109C84.515 19.8745 84.7483 20.88 84.7483 22.1273C84.7483 23.3745 84.5107 24.3842 84.0356 25.1563C83.5689 25.92 82.7544 26.3018 81.5919 26.3018Z" fill="#23216E" class="ccompli2"></path>
<path d="M95.9998 29.3818C97.3744 29.3818 98.5835 29.0763 99.6271 28.4654C100.679 27.846 101.498 26.9933 102.083 25.9073C102.677 24.8127 102.974 23.5527 102.974 22.1273C102.974 20.7103 102.682 19.4588 102.096 18.3727C101.511 17.2782 100.692 16.4212 99.6398 15.8018C98.5962 15.1824 97.3828 14.8727 95.9998 14.8727C94.6422 14.8727 93.4416 15.1782 92.398 15.7891C91.3544 16.4 90.5356 17.2527 89.9416 18.3473C89.3477 19.4333 89.0507 20.6933 89.0507 22.1273C89.0507 23.5442 89.3392 24.8 89.9162 25.8945C90.5016 26.9806 91.3162 27.8333 92.3598 28.4527C93.4035 29.0721 94.6168 29.3818 95.9998 29.3818ZM95.9998 26.1491C94.9222 26.1491 94.1034 25.7885 93.5434 25.0673C92.9919 24.3376 92.7162 23.3576 92.7162 22.1273C92.7162 20.9309 92.9792 19.9636 93.5053 19.2254C94.0398 18.4788 94.8713 18.1054 95.9998 18.1054C97.0944 18.1054 97.9174 18.4703 98.4689 19.2C99.0289 19.9297 99.3089 20.9054 99.3089 22.1273C99.3089 23.3067 99.0331 24.2739 98.4816 25.0291C97.9386 25.7757 97.1113 26.1491 95.9998 26.1491Z" fill="#23216E" class="ccompli2"></path>
<path d="M104.5 13.3454H107.962V10.2909H104.5V13.3454ZM104.5 29H107.962V15.2545H104.5V29Z" fill="#23216E" class="ccompli2"></path>
<path d="M110.225 35.1091H113.712V28.5036C114.162 28.7836 114.658 29 115.201 29.1527C115.753 29.3054 116.351 29.3818 116.996 29.3818C118.26 29.3818 119.368 29.0636 120.318 28.4273C121.268 27.7909 122.006 26.9254 122.532 25.8309C123.067 24.7363 123.334 23.5018 123.334 22.1273C123.334 20.7273 123.063 19.4842 122.52 18.3982C121.985 17.3036 121.23 16.4424 120.254 15.8145C119.278 15.1867 118.133 14.8727 116.818 14.8727C116.105 14.8727 115.452 14.9745 114.858 15.1782C114.272 15.3733 113.746 15.6533 113.28 16.0182V15.2545H110.225V35.1091ZM116.436 26.3018C115.282 26.3018 114.468 25.92 113.992 25.1563C113.517 24.3842 113.28 23.3745 113.28 22.1273C113.28 20.88 113.513 19.8745 113.98 19.1109C114.455 18.3388 115.231 17.9527 116.309 17.9527C117.081 17.9527 117.713 18.1436 118.205 18.5254C118.706 18.8988 119.075 19.4036 119.312 20.04C119.55 20.6679 119.669 21.3636 119.669 22.1273C119.669 22.8994 119.554 23.6036 119.325 24.24C119.096 24.8679 118.744 25.3685 118.269 25.7418C117.794 26.1151 117.183 26.3018 116.436 26.3018Z" fill="#23216E" class="ccompli2"></path>
<path d="M129.606 29.3818C131.404 29.3818 132.813 28.9788 133.831 28.1727C134.849 27.3666 135.358 26.2594 135.358 24.8509C135.358 23.7818 135.027 22.9376 134.366 22.3182C133.712 21.6988 132.601 21.1854 131.031 20.7782C129.962 20.5066 129.164 20.286 128.638 20.1163C128.121 19.9467 127.777 19.7812 127.607 19.62C127.446 19.4588 127.366 19.2594 127.366 19.0218C127.366 18.623 127.556 18.3176 127.938 18.1054C128.329 17.8933 128.842 17.8085 129.478 17.8509C130.827 17.9527 131.566 18.5297 131.693 19.5818L135.231 18.9454C135.053 17.6982 134.442 16.7097 133.398 15.98C132.355 15.2418 131.023 14.8727 129.402 14.8727C127.739 14.8727 126.411 15.263 125.418 16.0436C124.426 16.8242 123.929 17.8763 123.929 19.2C123.929 20.2521 124.273 21.0836 124.96 21.6945C125.647 22.297 126.831 22.8145 128.511 23.2473C129.504 23.5103 130.233 23.7224 130.7 23.8836C131.175 24.0448 131.481 24.2103 131.616 24.38C131.752 24.5412 131.82 24.7576 131.82 25.0291C131.82 25.4618 131.65 25.8012 131.311 26.0473C130.972 26.2848 130.488 26.4036 129.86 26.4036C129.096 26.4036 128.464 26.2212 127.964 25.8563C127.472 25.4915 127.153 24.9867 127.009 24.3418L123.471 24.8763C123.7 26.3103 124.345 27.4218 125.406 28.2109C126.475 28.9915 127.875 29.3818 129.606 29.3818Z" fill="#23216E" class="ccompli2"></path>
<path d="M141.744 29.4073C142.737 29.4073 143.602 29.2418 144.341 28.9109C145.079 28.58 145.698 28.1388 146.199 27.5873V29H149.253V15.2545H145.766V22.2291C145.766 23.0776 145.668 23.7648 145.473 24.2909C145.287 24.8085 145.045 25.203 144.748 25.4745C144.451 25.7376 144.133 25.9157 143.793 26.0091C143.454 26.1024 143.136 26.1491 142.839 26.1491C142.101 26.1491 141.528 25.9836 141.121 25.6527C140.722 25.3218 140.433 24.9103 140.255 24.4182C140.077 23.926 139.971 23.4382 139.937 22.9545C139.903 22.4624 139.886 22.0594 139.886 21.7454V15.2545H136.373V22.9673C136.373 23.1963 136.39 23.5612 136.424 24.0618C136.458 24.5624 136.556 25.1182 136.717 25.7291C136.878 26.3315 137.145 26.9127 137.519 27.4727C137.901 28.0327 138.431 28.4951 139.11 28.86C139.788 29.2248 140.667 29.4073 141.744 29.4073Z" fill="#23216E" class="ccompli2"></path>
<path d="M151.258 29H154.745V20.6763C154.745 19.8873 154.961 19.2467 155.394 18.7545C155.835 18.2539 156.416 18.0036 157.138 18.0036C157.893 18.0036 158.483 18.2582 158.907 18.7673C159.339 19.2679 159.556 19.9721 159.556 20.88V29H163.018V20.6763C163.018 19.8873 163.234 19.2467 163.667 18.7545C164.108 18.2539 164.689 18.0036 165.41 18.0036C166.166 18.0036 166.755 18.2582 167.179 18.7673C167.612 19.2679 167.829 19.9721 167.829 20.88V29H171.29V19.9636C171.29 18.4618 170.887 17.2485 170.081 16.3236C169.284 15.3903 168.1 14.9236 166.53 14.9236C165.648 14.9236 164.838 15.1145 164.099 15.4963C163.361 15.8782 162.772 16.4 162.33 17.0618C161.974 16.417 161.465 15.8994 160.803 15.5091C160.141 15.1188 159.318 14.9236 158.334 14.9236C157.502 14.9236 156.739 15.0891 156.043 15.42C155.347 15.7424 154.77 16.1879 154.312 16.7563V15.2545H151.258V29Z" fill="#23216E" class="ccompli2"></path>
<path d="M20 0C8.9543 0 0 8.9543 0 20C11.0457 20 20 11.0457 20 0Z" fill="#45D2B0" class="ccustom"></path>
<path d="M20 40C31.0457 40 40 31.0457 40 20C28.9543 20 20 28.9543 20 40Z" fill="#45D2B0" class="ccustom"></path>
<path d="M20 0C31.0457 0 40 8.9543 40 20C28.9543 20 20 11.0457 20 0Z" fill="#23216E" class="ccompli2"></path>
<path d="M20 40C8.9543 40 -9.65645e-07 31.0457 0 20C11.0457 20 20 28.9543 20 40Z" fill="#23216E" class="ccompli2"></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-2-img">View Full Size</label>
</div>
</div>
<div class="card">
<svg id="logo-28" width="161" height="44" viewBox="0 0 161 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.196 29H57.715V12.44H54.196V29Z" class="ccustom" fill="#55AE36"></path>
<path d="M64.9338 29.368C68.6138 29.368 71.0288 26.999 71.0288 22.813C71.0288 18.765 68.6828 16.235 64.9338 16.235C61.2538 16.235 58.8618 18.604 58.8618 22.813C58.8618 26.884 61.1848 29.368 64.9338 29.368ZM64.9338 26.516C63.3468 26.516 62.4728 25.205 62.4728 22.813C62.4728 20.398 63.3238 19.087 64.9338 19.087C66.5438 19.087 67.4178 20.421 67.4178 22.813C67.4178 25.228 66.5668 26.516 64.9338 26.516Z" class="ccustom" fill="#55AE36"></path>
<path d="M76.7538 29.023C78.0878 29.023 79.1918 28.471 79.9738 27.39V29.46C79.9738 31.185 79.1228 31.76 77.8578 31.76C76.6388 31.76 75.6958 31.162 75.5578 30.058H72.0388C72.4758 33.071 74.7528 34.451 77.9038 34.451C81.1468 34.451 83.4928 32.726 83.4928 29.414V16.626H79.9738V17.776C79.2148 16.764 78.1338 16.235 76.7538 16.235C73.6718 16.235 71.6708 18.535 71.6708 22.652C71.6708 26.585 73.6258 29.023 76.7538 29.023ZM77.6048 26.171C76.0868 26.171 75.2818 24.906 75.2818 22.652C75.2818 20.329 76.0868 19.087 77.6048 19.087C79.1458 19.087 79.9738 20.352 79.9738 22.629C79.9738 24.929 79.1688 26.171 77.6048 26.171Z" class="ccustom" fill="#55AE36"></path>
<path d="M90.7315 29.368C94.4115 29.368 96.8265 26.999 96.8265 22.813C96.8265 18.765 94.4805 16.235 90.7315 16.235C87.0515 16.235 84.6595 18.604 84.6595 22.813C84.6595 26.884 86.9825 29.368 90.7315 29.368ZM90.7315 26.516C89.1445 26.516 88.2705 25.205 88.2705 22.813C88.2705 20.398 89.1215 19.087 90.7315 19.087C92.3415 19.087 93.2155 20.421 93.2155 22.813C93.2155 25.228 92.3645 26.516 90.7315 26.516Z" class="ccustom" fill="#55AE36"></path>
<path d="M97.9976 15.384H101.517V12.44H97.9976V15.384ZM97.9976 29H101.517V16.626H97.9976V29Z" class="ccustom" fill="#55AE36"></path>
<path d="M106.711 34.083V27.758C107.447 28.816 108.505 29.368 109.816 29.368C112.967 29.368 115.014 26.999 115.014 22.79C115.014 18.742 113.013 16.235 109.816 16.235C108.528 16.235 107.47 16.833 106.711 17.914V16.626H103.192V34.083H106.711ZM109.08 19.087C110.575 19.087 111.403 20.398 111.403 22.79C111.403 25.205 110.598 26.516 109.08 26.516C107.539 26.516 106.711 25.182 106.711 22.79C106.711 20.398 107.516 19.087 109.08 19.087Z" class="ccustom" fill="#55AE36"></path>
<path d="M119.24 20.053C119.24 19.386 119.838 18.926 120.758 18.926C122 18.926 122.736 19.455 122.943 20.72H126.439C126.094 17.592 123.84 16.235 120.873 16.235C117.561 16.235 115.882 18.167 115.882 20.237C115.882 25.205 123.38 23.066 123.38 25.458C123.38 26.217 122.759 26.7 121.517 26.7C120.206 26.7 119.263 26.079 119.102 24.929H115.583C116.043 27.98.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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