响应式日落效果
代码语言：html
所属分类：响应式
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
.image {
transition: fill 3s ease-in-out;
height: 100vh;
display: grid;
grid-template-columns: 1fr 80vh 1fr;
grid-template-rows: 72vh 1fr;
background-color: var(--trees);
}
[class*="section_"] {
grid-column: 1 / -1;
grid-row: 1;
height: 100%;
width: 100%;
}
svg {
width: 100%;
height: 100%;
}
.section_sky {
grid-column: 1 / -1;
grid-row: 1;
}
.section_rl, .section_ml, .section_fl {
grid-column: 1;
grid-row: 1;
}
.section_rm, .section_mm, .section_fm {
grid-column: 2;
grid-row: 1;
}
.section_rr, .section_mr, .section_fr {
grid-column: 3;
grid-row: 1;
}
[class*="section_f"], .section_trees {
isolation: isolate;
}
.section_mfog {
height: 30%;
margin-top: 30vh;
}
.section_ffog {
height: 30%;
margin-top: auto;
}
.section_sun {
height: 16vh;
width: 16vh;
margin: 4vh auto 0;
}
.gradient stop {
transition: stop-color3sease-in-out;
}
.image-light {
--rear_highlight: #ff8080;
--rear_shadow: #c26d80;
--mid_highlight: #ff6666;
--mid_shadow: #824b6c;
--fore_highlight: #ff4d4d;
--fore_shadow: #623851;
--trees: #412536;
--sky-bottom: #FFAD66;
--sky-mid: #ff8080;
--sky-top: #412536;
--fog: #ffff66;
--sun: #ff4f23;
}
.image-dark {
--rear_highlight: #a5cfe6;
--rear_shadow: #7095af;
--mid_highlight: #88d1fb;
--mid_shadow: #4B6C82;
--fore_highlight: #87d5f7;
--fore_shadow: #385162;
--trees: #253641;
--sky-bottom: #a1cde4;
--sky-mid: #7eb9d8;
--sky-top: #051f33;
--fog: #c9dfff;
--sun: #6daac2;
}
.image-light .moon {
opacity: 0;
}
.image-dark .moon {
opacity: .22;
}
.screen {
mix-blend-mode: screen;
}
.fog {
fill: url(#gradient-fog);
opacity: .22;
}
.moon {
isolation: isolate;
opacity: 0.22;
mix-blend-mode: multiply;
transition: opacity 3s ease-in-out;
}
.moon-grey1 {
fill: #757575;
}
.moon-grey2 {
fill: #595959;
}
.moon-grey3 {
fill: #b2b2b2;
}
.moon-grey4 {
fill: #ddd;
}
path, polygon {
transition: fill 3s ease-in-out;
}
.image {
transition: background-color 3s ease-in-out;
}
.switch {
display: flex;
align-items: center;
position: absolute;
bottom: 1rem;
right: 1rem;
border: 0;
background: transparent;
cursor: pointer;
}
.switch span {
filter: saturate(0);
background-color: transparent;
opacity: .5;
padding: .25rem;
border-bottom-style: solid;
border-bottom-width: 2px;
transition: border-bottom-color 3s ease-in-out, filter 3s ease-in-out, opacity 3s ease-in-out;
}
.switch span:first-child {
margin-right: 1rem;
}
[aria-checked="false"] span:first-child {
filter: none;
opacity: 1;
border-color: white;
}
[aria-checked="true"] span:last-child {
filter: none;
opacity: 1;
border-color: white;
}
</style>
</head>
<body>
<div class="image image-dark">
<svg class="section_sky" preserveAspectRatio="none">
<defs>
<linearGradient class="gradient" id="gradient-sky" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="var(--sky-top)" />
<stop offset="40%" stop-color="var(--sky-mid)" />
<stop offset="100%" stop-color="var(--sky-bottom)" />
</linearGradient>
<linearGradient class="gradient" id="gradient-fog" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="#000000" />
<stop offset="90%" stop-color="var(--fog)" />
</linearGradient>
<linearGradient class="gradient" id="gradient-sun" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="#000000" />
<stop offset="90%" stop-color="var(--sun)" />
</linearGradient>
</defs>
<rect height="100%" width="100%" fill="url(#gradient-sky)" />
</svg>
<svg class="section_sun screen" viewBox="0 0 27 27">
<circle id="sun" class="screen" fill="url(#gradient-sun)" cx="50%" cy="50%" r="13" />
<g class="moon">
<polygon class="moon-grey1" points="15.37 23.8 15.37 23.8 15.37 23.8 15.37 23.8" />
<path class="moon-grey1" d="M15.22,23.81s0,.06-.06.11h0s0,0,.2-.11h0Z" />
<path class="moon-grey1" d="M19.05,14.34a2.34,2.34,0,0,1,.1.4A.9.9,0,0,0,19.05,14.34Z" />
<path class="moon-grey1" d="M9.81,3.24h0a2.65,2.65,0,0,1-.33.24l-.14.19c-.23.34-.47.66-.68.94v0a.58.58,0,0,1,.43.13c-.07-.06-.1-.12.11.08l0-.1,0,.1c2.25-.75,1.38.3,1.57,1a1.47,1.47,0,0,1,.2-.4c-.17-.45.14-.83.57-1.15a.63.63,0,0,1-.32-.06A1.39,1.39,0,0,1,9.81,3.24ZM9.2,4.72v0ZM9.61,4c0-.05,0-.09.19-.29C10.08,3.82,10,4.45,9.61,4Zm.89.31s-.11,0,0,0Z" />
<path class="moon-grey1" d="M19.64,16.88c-.24-.11-.09-.79-.65-.68h0c-1,.78-.93.76-.62.36h0l0,0a2.07,2.07,0,0,0,.36-2.39H18.6q0-.11-.06-.24a3.13,3.13,0,0,0-.84-.55c-.62.62-.69.46-2.33.12l-.16,0c-.11,1.35-.6.28-1.11,1.13-.74.79-.59.95-1.77-.22-.78-.48,1-1.75-.78-1.93-.68,2.67-2.27,1.24-1.19-1.18-.16-.61-1.69-.84-1.65-1.6,1.73-.19,2.41-.5,3-2.07a2.11,2.11,0,0,0,0-.25l.09-.08a.17.17,0,0,0,0-.05h.09a.3.3,0,0,1,.16,0c1.05-.06,1.15-1-.32-1l.4,0a5.56,5.56,0,0,1-1.05-.17L10.86,6h0c.13.2.39.35.92.39A2.9,2.9,0,0,1,8,9.28c.13,0-.4,1.28.2,1.11.2-.18.95.37.19.47C6.1,10.59,10.83,12,5.92,12.35c-1.95-.27-1.61-.82-1-2.72-.72.13-.21-.73.74-1.46a.47.47,0,0,0,0-.16h0l0,0V8h0a.89.89,0,0,0-.4.36c-.26.33-.51.73-1,.45.44-.4.42-1.62-.64-.54.13.13.12.42.07.75,0,0,0,0,0,.05l0,.06c-.16,1-.57,2.13.69.94.15.9-.8,1.83,1,2.41C2.43,15.93,2.51,15,4,18.9c.18.26.38.53.61.81.53.35,1.09.43,1.16,1.26C5.5,22.2,4,19.82,3.68,20.46c.1.29.95,1.56,0,1,.37.45,1.74,1.85,1.76,1.63A1.41,1.41,0,0,1,5.22,22c0-.34-.55-.82.6-.49.44.15.84,0,.58-.78s-1.48-.91-2-1.41a4.44,4.44,0,0,0-1.13-2.34c.28-.16.86-1,.59-1.26-.16-.62.71-.36,1.36-.5.68-1.43,1.2,1.43,2.08,0,1.15-2.9,1.08,2.37,2,2.66.3.61-1.22-.22.13,1.45.27,1.1.86.42,1.78.36.68-.73,1.58-.29-1.84,1.85-.28.43-2.06-1-1.26.31-1.82-.34,1.15,1.81,1.43.94-.47-2.32,2.16-.74,3.61-1.57-1.13-.4,1.29-.42-.71-1,.11,0-.47-.09.05-.3.7-.12.19-.89,1.46-1.52-.06-.21-.58-.13-.73-1.43,1.26.47,1,.7,1.88-.77.11-.35,1.15-.58.58-1-.4-.25-.43-.5-1.11.26-.38.08-1.48,0-.43-.56,1-.85,5.49-2.25,4.47.83-.75.66-1.46,0-1.5,1.21-.06.05-2.36-.05-.35,1.06h.06s0,0,0,.06c.3.16.66.33,1.13.54.7-.73,1.58-.93,1.88.51-.07,1.37-2.2,1.56-1.95.74l-.19-.22a7.94,7.94,0,0,0-1.09.22c-.57.33-.53.64-.33.94l.15.05a.45.45,0,0,0,0,.11c.38.45,1,.89,0,1.34,1.23.58-.19,1-1.09,1.54h0c-.06.06,0,0-.2.12,0,0,0,0,0,0l-.11.1a.59.59,0,0,0-.17,0l.17,0c-.51.48-4.53,2-5.32.74l0-.05-.13.05,0,0-.07,0a.71.71,0,0,1,0,.48l-.3-.11c.33.63,4.85,1.06,9.19-3.31,0-.61-1.25-1-.94-1.87,1.14,1.69,4.61-1.13,1.95-2.31-.2-.37,1.32.53,1.21-.93l0-.24C20.22,17.09,19.65,14.73,19.64,16.88ZM3.55,16.44s-.11-.15,0,0a.14.14,0,0,1,0-.06A.14.14,0,0,0,3.55,16.44ZM12.12,13c.07.06.23.08-.1.24C12,13.16,11.77,13.15,12.12,13ZM8,12.54l0,0,0,0S7.88,12.37,8,12.54ZM4.43,14.32c.05-.05.07-.19.23.08C4.57,14.44,4.55,14.6,4.43,14.32Zm4.21.56c-1.39-2.5-2.19,2.71-1.74-1.55-.53-.61-.32-.18-1,.66-.36.15-1.42-.31-.55-.36C6.22,12,9.19,12.67,8.64,14.88Zm.7,0c-.67.28.59-1.46-.38-1.6s-.51-1.8.33-2.13c-.24-.36-.31-.8.41-.12s-1.22,4.59,2.11,2.66C12.87,16.66,11.38,14.68,9.34,14.93Zm2.57,1.53c-.61.48-.92-1.06-.24-.67.32.6.12.25.78-.17C12.81,15.74,12.22,16.44,11.91,16.46Zm3.44-2.69s-.09-.29,0,0q.06-.07.06-.06S15.39,13.72,15.35,13.77ZM18,17.31c-.06-.33.44-.52.84-.81C19.05,16.77,18.55,17.64,18,17.31Zm2-.11c-.09,0,.07.13-.34.2C19.08,17.21,20.25,16.74,20,17.2Z" />
<path class="moon-grey1" d="M3.71,21.45l0-.08C3.62,21.32,3.64,21.36,3.71,21.45Z" />
<path class="moon-grey1" d="M16.65,13.65l0,0-.15,0Z" />
<path class="moon-grey2" d="M18,18.56c-.47-.21-.83-.38-1.13-.54l-.1-.05c-2-1.11.29-1,.35-1.06,0-1.17.75-.55,1.5-1.21,1-3.08-3.47-1.68-4.47-.83-1.05.53,0,.64.43.56.68-.76.71-.51,1.11-.26.57.43-.47.66-.58,1-.88,1.47-.62,1.24-1.88.77.15,1.3.67,1.22.73,1.43-1.27.63-.76,1.4-1.46,1.52-.52.21.06.27-.05.3,2,.54-.42.56.71,1-1.45.83-4.08-.75-3.61,1.57-.28.87-3.25-1.28-1.43-.94-.8-1.35,1,.12,1.26-.31,3.42-2.14,2.52-2.58,1.84-1.85-.92.06-1.51.74-1.78-.36-1.35-1.67.17-.84-.13-1.45-.91-.29-.84-5.56-2-2.66-.88,1.45-1.4-1.41-2.08,0-.65.14-1.52-.12-1.36.5.27.25-.31,1.1-.59,1.26a4.44,4.44,0,0,1,1.13,2.34c.51.5,1.61.77,2,1.41s-.14.93-.58.78c-1.15-.33-.62.15-.6.49a1.41,1.41,0,0,0,.27,1.14c.7.95,2.46,1.58,3.7,2l.3.11a.71.71,0,0,0,0-.48.39.39,0,0,0-.1-.16,1.77,1.77,0,0,1,.17.14l0,0,.13-.05,0,.05c.79,1.26,4.81-.26,5.32-.74l-.17,0a.59.59,0,0,1,.17,0l.11-.1s0,0,0,0h0c.05-.05.07-.08.06-.11l.15,0h0c-.18.08-.19.1-.2.11.19-.11.14-.06.2-.12h0c.9-.57,2.32-1,1.09-1.54.93-.45.35-.89,0-1.34l-.12-.16c-.2-.3-.24-.61.33-.94a7.94,7.94,0,0,1,1.09-.22l.19.22c-.25.82,1.88.63,1.95-.74C19.57,17.63,18.69,17.83,18,18.56Zm-9.53.6c.26-.21.35-.12.75.27C9.16,19.78,8,19.64,8.46,19.16ZM4.71,16.3s-.1-.14,0,0l0,0Zm2.2-.38a1.7,1.7,0,0,1,.35.29C7.2,16.68,6.47,16.34,6.91,15.92Zm3.47,8.7a.51.51,0,0,1,0-.13.26.26,0,0,0,0,.11Zm2.77-3.46c0-.07.31-.16,0,0Zm.17-1.75s-.11.05,0,0Zm.57-.12c0-.05-.25-.08,0-.18C14,19.14,14.14,19.19,13.89,19.29Zm1.48,4.51h0Zm-.18-4.72c-1,0-1.47-1.36.21-.83C15.63,18.31,15.74,18.49,15.19,19.08Zm1.48,3.72Zm-.46-1.67,0,0L16.11,21A.65.65,0,0,1,16.21,21.13Z" />
<path class="moon-grey3" d="M25.21,8.75c.06.16.12.31.17.47A4.61,4.61,0,0,0,25.21,8.75Z" />
<path class="moon-grey3" d="M10,.93l.12.08C9.27.93,7.91,1.73,7.2,2.07c.17,0,0,0,.4,0C6.65,2,4.23,5.65,6.11,4.31c.4-.09-1,.9.06,1.52.85,0,.27,0,.31-1.16.88-.32,4.37-2.86,2-.44C8.17,4.3,6.3,6,7.26,5.74L7.07,6c-.05,0-.2,0-.35.13C6,7,5.67,8.7,4.41,7.33,2.62,8.7,3.11,7.24,2.65,9.08c-.25,1.66-1-.14-1.21,2.1C1,14.81,2.86,18.88,3.68,21.37l0,.08v0h0c.9.55,0-.72,0-1C4,19.82,5.5,22.2,5.78,21c-.07-.83-.63-.91-1.16-1.26a1.74,1.74,0,0,1-.46-.41L4,18.9c-1.5-3.92-1.58-3,1.35-6.43-1.81-.58-.86-1.51-1-2.41-1.26,1.19-.85,0-.69-.94,0,0,0-.07,0-.11,0-.33.06-.62-.07-.75,1.06-1.08,1.08.14.64.54.49.28.74-.12,1-.45A.89.89,0,0,1,5.65,8h0l.11,0L5.66,8l0,0h0L6,7.94c2.85-.66.89-1.55,1.22-1.77A11.78,11.78,0,0,0,8.59,4.64h0l0,0c.21-.28.45-.6.68-.94l.14-.19a2.65,2.65,0,0,0,.33-.24h0a.17.17,0,0,1,0-.05A2.26,2.26,0,0,1,11.49,1.9a.21.21,0,0,1,.19,0A2.28,2.28,0,0,1,13.34,3c-.09.57-.88,1.09-1.7,1.23l-.12.09c-.43.32-.74.7-.57,1.15l0,.08c.62-.93.88-.62,1-.27.67-1.32,1.73-1,2-2.43.4-.33.46.23.62.4,1.39,0,.34.28.16.45-.75.73.9,0,.9,0,.59-1.79-.53-1-.6-1.51,2-2.86,8.74,3.46,10.09,6.55-.05-.12-.09-.25-.14-.37C22.65,2.63,16-.81,10,.93ZM7.18,2.5a.86.86,0,0,1,.67-.2,1.23,1.23,0,0,1,.78.51L8.76,3h0C6.29,5.12,6.34,3.19,7.18,2.5ZM6.7,6.57s0,0,0-.09l.08-.06A1,1,0,0,0,6.7,6.57Z" />
<path class="moon-grey4" d="M2.73,20.17c-1-2-1.14-4.13-1.66-6.22C-.26,11.48,1.68,19.55,2.73,20.17Z" />
<path class="moon-grey4" d="M.81,11.09c.48.06.79-1.55,1-1.91C1.4,8.24.8,10.84.81,11.09Z" />
<path class="moon-grey3" d="M19.05,14.34a1.74,1.74,0,0,0-.88-1h0a1.34,1.34,0,0,0-1.47.32l0,0-.12-.05c-1.83-.74-2,.51-3.17,1.4-.81-.92-.6-1.72-.75-2.65-3.69-.22-1-.27-2.55-1.84-.72.16-.09-.27-.26-.57.33-.47,1,.07,1.24-.47A2.33,2.33,0,0,0,11.63,8a1.08,1.08,0,0,1,0-.21c.09-.31.31-.46,1.12-.3.35-.09.44-.11.44-.27.81-2.83.47-.06,2.14-1.33.81-.15.47-.32.36-.83,1-1.81-.87-.19-1.65-.49C13,4.8,13.84,6,12.16,6.26l-.4,0c1.47,0,1.37.89.32,1h-.25a.17.17,0,0,1,0,.05,3.19,3.19,0,0,1-.11.33c-.58,1.57-1.26,1.88-3,2.07,0,.76,1.49,1,1.65,1.6-1.08,2.42.51,3.85,1.19,1.18,1.8.18,0,1.45.78,1.93,1.18,1.17,1,1,1.77.22.51-.85,1,.22,1.11-1.13v-.07l.16,0c1.64.34,1.71.5,2.33-.12a3.13,3.13,0,0,1,.84.55,1.41,1.41,0,0,1,.2.24,2.07,2.07,0,0,1-.36,2.39l0,0c-.31.4-.41.42.62-.36h0a2.69,2.69,0,0,0,.16-1.46A2.34,2.34,0,0,0,19.05,14.34ZM9.56,9.85a.11.11,0,0,1-.05,0,.11.11,0,0,0,.05,0C9.57,9.92,9.31,10,9.56,9.85Z" />
<path class="moon-grey3" d="M11,5.52c-.4.47-.07.51,0,.53C10.78,5.92,10.82,5.73,11,5.52Z" />
<path class="moon-grey3" d="M11,6.05l0,0S11.06,6.06,11,6.05Z" />
<path class="moon-grey2" d="M10.82,6a.87.87,0,0,1-.07-.17c-.19-.71.68-1.76-1.57-1,0,0-.07,0-.11-.08a.58.58,0,0,0-.43-.13H8.59A11.78,11.78,0,0,1,7.23,6.17C6.9,6.39,8.86,7.28,6,7.94a2.75,2.75,0,0,0-.33.23c-.95.73-1.46,1.59-.74,1.46-.63,1.9-1,2.45,1,2.72,4.91-.35.18-1.76,2.49-1.49.76-.1,0-.65-.19-.47-.6.17-.07-1.12-.2-1.11A2.9,2.9,0,0,0,11.74,6.4C11.21,6.36,11,6.21,10.82,6Z" />
<path class="moon-grey2" d="M9.7,11.08c-.72-.68-.65-.24-.41.12-.84.33-1.34,2-.33,2.13s-.29,1.88.38,1.6c2-.25,3.53,1.73,2.47-1.19C8.48,15.67,10.5,11.89,9.7,11.08Z" />
<path class="moon-grey2" d="M11.68,1.9h-.19A2.26,2.26,0,0,0,9.78,3.17a.17.17,0,0,0,0,.05v0a1.39,1.39,0,0,0,1.39,1l.44,0c.82-.14,1.61-.66,1.7-1.23A2.28,2.28,0,0,0,11.68,1.9Z" />
<path class="moon-grey3" d="M5.34,13.63c-.87,0,.19.51.55.36.69-.84.48-1.27,1-.66-.45,4.26.35-.95,1.74,1.55C9.19,12.67,6.22,12,5.34,13.63Z" />
<path class="moon-grey2" d="M12.45,15.62c-.66.42-.46.77-.78.17-.68-.39-.37,1.15.24.67C12.22,16.44,12.81,15.74,12.45,15.62Z" />
<path class="moon-grey2" d="M18,17.31c.53.33,1-.54.84-.81C18.46,16.79,18,17,18,17.31Z" />
<path class="moon-grey2" d="M19.64,17.4c.41-.07.25-.19.34-.2C20.25,16.74,19.08,17.21,19.64,17.4Z" />
<path class="moon-grey3" d="M9.8,3.7c-.17.2-.18.24-.19.29C10,4.45,10.08,3.82,9.8,3.7Z" />
<path class="moon-grey3" d="M9.2,4.72c0-.08,0-.06,0,0Z" />
<path class="moon-grey3" d="M9.18,4.83l0-.1Z" />
<path class="moon-grey3" d="M9.07,4.75s.1.1.11.08C9,4.63,9,4.69,9.07,4.75Z" />
<path class="moon-grey2" d="M12,13.26c.33-.16.17-.18.1-.24C11.77,13.15,12,13.16,12,13.26Z" />
<path class="moon-grey3" d="M4.43,14.32c.12.28.14.12.23.08C4.5,14.13,4.48,14.27,4.43,14.32Z" />
<path class="moon-grey2" d="M15.35,13.77c-.09-.29,0,0,0,0Z" />
<path class="moon-grey2" d="M15.35,13.77c.08-.07.08-.1,0,0Z" />
<path class="moon-grey3" d="M3.55,16.44c0-.07,0-.09,0,0Z" />
<path class="moon-grey3" d="M3.55,16.44c-.11-.15,0,0,0,0Z" />
<path class="moon-grey2" d="M8,12.54c-.08-.17,0,0,0,0Z" />
<path class="moon-grey2" d="M8,12.54Z" />
<path class="moon-grey3" d="M10.5,4.3c-.11,0,0,0,0,0Z" />
<path class="moon-grey1" d="M15.4,18.25c-1.68-.53-1.2.81-.21.83C15.74,18.49,15.63,18.31,15.4,18.25Z" />
<path class="moon-grey1" d="M8.46,19.16c-.49.48.7.62.75.27C8.81,19,8.72,19,8.46,19.16Z" />
<path class="moon-grey1" d="M7.26,16.21a1.7,1.7,0,0,0-.35-.29C6.47,16.34,7.2,16.68,7.26,16.21Z" />
<path class="moon-grey1" d="M13.89,19.29c.25-.1.07-.15,0-.18C13.64,19.21,13.85,19.24,13.89,19.29Z" />
<path class="moon-grey1" d="M13.15,21.16c.31-.16,0-.07,0,0Z" />
<path class="moon-grey1" d="M4.71,16.3c-.1-.14,0,0,0,0Z" />
<path class="moon-grey1" d="M4.71,16.3Z" />
<path class="moon-grey1" d="M13.32,19.41c-.11.05,0,0,0,0Z" />
<path class="moon-grey3" d="M2.65,6.83c-.76,1.91.45,0,.55-.64C2.7,5.65,2.83,6.82,2.65,6.83Z" />
<path class="moon-grey1" d="M9.56,9.85c-.25.14,0,.07,0,0Z" />
<path class="moon-grey1" d="M9.56,9.85Z" />
<path class="moon-grey2" d="M8.63,2.81a1.23,1.23,0,0,0-.78-.51.86.86,0,0,0-.67.2c-.84.69-.89,2.62,1.58.48h0Z" />
</g>
</svg>
<svg class="section_rl" viewBox="0 0 67 90" preserveAspectRatio="none">
<path fill="var(--rear_highlight)" d="M63.62,43.23H59.33l-6.25,0-5.89,1.37s-3.32.32-4.57.33-2.93-1.7-2.93-1.7S31.94,46,29.32,45.76c-4.94-.37-8.38-.69-10-.95s-6.66-4.63-9-4.49S.29,40.93,0,41.2V51.94l67.1.06V42.93A14,14,0,0,0,63.62,43.23Z" />
<path fill="var(--rear_shadow)" d="M63.62,43.94H59.33l-6.25,0-5.89,1.38s-3.32.32-4.57.33-2.93-1.71-2.93-1.71-7.88,2.92-10.5,2.72c-4.94-.37-7.57-3.76-9.17-4S12.68,40.88,10.36,41,.29,41.64,0,41.91V64.28l67.1,0V43.64A14,14,0,0,0,63.62,43.94Z" />
</svg>
<svg class="section_rm" viewBox="0 0 100 90">
<path fill="var(--rear_highlight)" d="M-1,42.93 h1 a16,16,0,0,1,4.5.76C5.07,43.87,11,45,11,45l7.71.88,7.5,2.08s7,.52,8.63-.15a12.34,12.34,0,0,1,6-.67c2.61.2,6.3.8,6.3.8l6.53.52,5.24-.56,5.88-1,.73,5.17L0,52Z" />
<path fill="var(--rear_shadow" d="M-1,43.64V64.33 h1 l66.62,0-1.85-16.8-5.88,1-5.24.56-6.53-.51s-3.69-.6-6.3-.8a12.23,12.23,0,0,0-6,.66c-1.63.68-8.63.16-8.63.16l-7.5-2.08L11,45.67S5.07,44.58,4.5,44.39A16,16,0,0,0,0,43.64Z" />
</svg>
<svg class="section_ml" viewBox="0 0 67 90" preserveAspectR.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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