div+css实现圣诞快乐按钮悬浮动画效果代码
代码语言：html
所属分类：悬停
代码描述：div+css实现圣诞快乐按钮悬浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap');
* {
font-family: 'Mountains of Christmas', serif;
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
:root {
--red: #dc3d2a;
--blue: #87ceeb;
}
.overflow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
z-index: 10;
border-radius: 12px;
}
button {
position: relative;
width: 150px;
height: 50px;
border: 0px solid;
outline: 0px solid;
cursor: pointer;
background: var(--blue);
border-radius: 12px;
}
body {
background: #212121;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.santa {
width: 45px;
position: absolute;
z-index: -1;
top: 0px;
transition: 250ms;
}
.christmas-tree {
width: 30px;
position: absolute;
transform: translateY(30px);
transition: 300ms;
transition-delay: 500ms;
}
.christmas-tree-1 {
left: 0px;
top: 20px;
}
.christmas-tree-2 {
right: 0px;
top: 20px;
}
.cloud-container {
position: absolute;
width: 100%;
transform: translateY(-40px);
transition: 250ms;
transition-delay: 250ms;
}
.cloud {
fill: #fff;
position: absolute;
}
.cloud:nth-child(1) {
left: 30px;
top: 3px;
animation-name: cloud;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: backwards;
}
.cloud:nth-child(2) {
right: 30px;
top: 14px;
animation-name: cloud;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: backwards;
}
@keyframes cloud {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(-4px);
}
100% {
transform: translateX(4px);
}
}
.snowflake {
position: absolute;
z-index: -1;
opacity: 0;
}
.snowflake:nth-child(1) {
transition: .8s;
filter: drop-shadow(0 0 10px #fffdef);
width: 30px;
height: 30px;
inset: 0;
}
.snowflake:nth-child(2) {
transition: .8s;
filter: drop-shadow(0 0 10px #fffdef);
width: 20px;
height: 20px;
inset: 0;
}
.snowflake:nth-child(3) {
transition: .8s;
filter: drop-shadow(0 0 10px #fffdef);
width: 40px;
height: 40px;
inset: 0;
}
.snowflake:nth-child(4) {
transition: .8s;
filter: drop-shadow(0 0 10px #fffdef);
width: 10px;
height: 10px;
inset: 0;
}
.snowflake:nth-child(5) {
transition: .8s;
filter: drop-shadow(0 0 10px #fffdef);
width: 8px;
height: 8px;
inset: 0;
}
.sun {
position: absolute;
inset: 0;
margin: auto;
animation-name: sun;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes sun {
from {
transform: rotate(0..5turn);
}
to {
transform: rotate(1turn);
}
}
.text-container {
color: white;
background: var(--red);
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 11;
transition: 250ms;
font-size: 16px;
}
/* hover state css */
button:hover{
box-shadow: 0 0 25px var(--blue);
}
button:hover .christmas-tree {
transform: translateY(0px);
}
button:hover .cloud-container {
transform: translateY(0px);
}
button:hover .snowflake:nth-child(1) {
top: 95%;
left: 25%;
animation-name: sun;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity: 1;
}
button:hover .snowflake:nth-child(2) {
top: -35%;
left: 10%;
animation-name: sun;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
opacity: 1;
}
button:hover .snowflake:nth-child(3) {
opacity: 1;
top: -80%;
left: -30%;
animation-name: sun;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
button:hover .snowflake:nth-child(4) {
opacity: 1;
top: 120%;
left: 80%;
animation-name: sun;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
button:hover .snowflake:nth-child(5) {
opacity: 1;
top: 25%;
left: 115%;
animation-name: sun;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
button:hover .santa {
transform: translate(-30px, -40px);
}
button:hover .text-container {
transform: translateY(-100%);
}
/* hover state css */
</style>
</head>
<body>
<button>
<div class="overflow">
<div class="text-container">Merry Christmas
</div>
<svg class="christmas-tree christmas-tree-1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="christmas-tree">
<path fill="#d88a55" d="M285 406.03v88.47a10.004 10.004 0 0 1-10 10h-38a10.004 10.004 0 0 1-10-10v-88.47Z"></path>
<path fill="#c57a44" d="M285 406.03v69.46l-58-59.1v-10.36h58z"></path>
<circle cx="370" cy="468" r="22.5" fill="#fed402"></circle>
<path fill="#fac600" d="M383.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"></path>
<circle cx="142" cy="468" r="22.5" fill="#fed402"></circle>
<path fill="#46cc8d" d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 6.22 6.22 0 0 1 1.75-3.86l.84-.9L240.5 204.21l8.92-9.55a7.823 7.823 0 0 1 .66-.63 9.555 9.555 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"></path>
<path fill="#00c27a" d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 617.144 617.144 0 0 0 67.78 10.19 576.568 576.568 0 0 0 76.56 2.12c60.36-2.37 124.42-16.24 158.32-24.61a14.913 14.913 0 0 0 7.31-24.66l-19.78-21.2-10.5-11.24-108.35-116.1 8.92-9.55a7.823 7.823 0 0 1 .66-.63 8.98 8.98 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"></path>
<path fill="#46cc8d" d="M409.45 301.52a695.395 695.395 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-4.89-1.11-6.84-6.05-3.72-9.4l62.83-67.29 88.8-95.11a7.993 7.993 0 0 1 11.18 0l88.79 95.11 62.83 67.29c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
<path fill="#46cc8d" d="M409.45 301.52a704.636 704.636 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a5.482 5.482 0 0 1 1.29-2.21l62.83-67.29 7.01-7.51 10.24-10.97 61.64-66.02 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.96 65.29h.01l1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
<path fill="#00c27a" d="M409.45 301.52q-7.68 1.74-16.07 3.43a696.535 696.535 0 0 1-135.25 13.63 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a698.084 698.084 0 0 0 115.64 9.26c28.51-.08 64.07-5.82 93.95-11.93 12.54-2.57 24.07-5.2 33.66-7.51 1.26-.3 2.48-.59 3.66-.88a14.503 14.503 0 0 0 7.15-23.99l-46.17-49.45-64.88-69.5 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.97 65.29 1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
<circle cx="146.433" cy="365.414" r="7.5" fill="#0067c5"></circle>
<circle cx="285" cy="376.542" r="22.5" fill="#00c27a"></circle>
<path fill="#f4d902" d="M134.43 197.67a4.263 4.263 0 0 0-.71 1.02 3.535 3.535 0 0 0-.16.34c-.04.12-.09.24-.12.36-.68 2.31.89 4.84 3.89 5.52q6.855 1.56 14.45 3.06a276.19 276.19 0 0 0 32.41-5.52c-17.94-.89-34.59-2.61-49.76-4.78zm152.91-63.44 10.25 10.98q8.58-7.365 16.54-15.49l-10.23-10.96a2.612 2.612 0 0 0-.25.23q-7.83 7.995-16.31 15.24z"></path>
<circle cx="276.328" cy="369.042" r="22.5" fill="#e53950"></circle>
<circle cx="194.053" cy="327.45" r="22.5" fill="#00c27a"></circle>
<circle cx="186.413" cy="318.588" r="22.5" fill="#e53950"></circle>
<path fill="#fac600" d="M155.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"></path>
<path fill="#46cc8d" d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02l.02-.02 3.28-3.51L240.5 84.06l11.18-11.97a6.176 6.176 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"></path>
<path fill="#00c27a" d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02 540.684 540.684 0 0 0 78.21 5.44c28.6-.08 66.39-7.53 91.83-13.41a16.884 16.884 0 0 0 8.55-27.97l-15.43-16.52-10.25-10.98-46.84-50.17 11.18-11.97a5.914 5.914 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"></path>
<circle cx="300.735" cy="230.47" r="22.5" fill="#00c27a"></circle>
<circle cx="294.064" cy="220.148" r="22.5" fill="#e53950"></circle>
<path fill="#fac600" d="m259.605 9.741 9.885 20.03a4.02 4.02 0 0 0 3.027 2.199l22.104 3.212a4.02 4.02 0 0 1 2.228 6.857l-15.994 15.59a4.02 4.02 0 0 0-1.157 3.559l3.776 22.014a4.02 4.02 0 0 1-5.833 4.238l-19.77-10.393a4.02 4.02 0 0 0-3.742 0L234.36 87.44a4.02 4.02 0 0 1-5.833-4.238l3.776-22.014a4.02 4.02 0 0 0-1.157-3.558l-15.994-15.591a4.02 4.02 0 0 1 2.228-6.857l22.104-3.212a4.02 4.02 0 0 0 3.027-2.2l9.885-20.029a4.02 4.02 0 0 1 7.21 0Z"></path>
<path fill="#ca2e43" d="M280.306 346.9a22.489 22.489 0 0 1-21.054 36.785 22.497 22.497 0 1 0 21.054-36.785zm17.678-149.073a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785zM190.39 296.445a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785z"></path>
<path fill="#fed402" d="M230.246 73.174c1.094.087 2.196.144 3.313.144a41.522 41.522 0 0 0 41.514-40.977l-2.556-.371a4.02 4.02 0 0 1-3.027-2.2l-9.885-20.029a4.02 4.02 0 0 0-7.21 0l-9.885 20.03a4.02 4.02 0 0 1-3.027 2.199l-22.104 3.212a4.02 4.02 0 0 0-2.228 6.857l15.994 15.59a4.02 4.02 0 0 1 1.157 3.559Z"></path>
<path fill="#282828" d="M309.005 172.364a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm32.787 98.632a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5ZM446.57 380.73l-62.034-66.442q13.352-2.477 26.572-5.46a13.958 13.958 0 0 0 10.554-9.38 12.65 12.65 0 0 0-2.97-12.46l-65.432-70.08q11.608-2.098 23.033-4.678a12.637 12.637 0 0 0 9.411-8.412 11.461 11.461 0 0 0-2.68-11.294L288.414 91.19a11.435 11.435 0 0 0 2.451-9.258l-3.467-20.212 14.686-14.314a11.52 11.52 0 0 0-6.385-19.65l-20.294-2.948-9.075-18.389a11.52 11.52 0 0 0-20.662 0l-9.075 18.389-20.292 2.949a11.52 11.52 0 0 0-6.386 19.65L224.6 61.72l-3.467 20.21a11.436 11.436 0 0 0 2.45 9.258l-94.615 101.337a11.471 11.471 0 0 0-2.68 11.303c.025.084.066.16.094.243a7.418 7.418 0 0 0 .41 1.06 12.733 12.733 0 0 0 8.876 7.093q11.464 2.596 23.063 4.688L93.3 286.988a12.664 12.664 0 0 0-2.97 12.474 13.912 13.912 0 0 0 10.514 9.357q13.18 2.986 26.62 5.466L65.427 380.73a13.593 13.593 0 0 0-3.199 13.385c.06.196.132.386.2.578.02.057.039.114.06.17a15.144 15.144 0 0 0 11.142 9.365q30.028 6.8 60.632 11.316l.184 23.416a30 30 0 1 0 15.001-.027l-.167-21.301q34.891 4.519 70.207 6.076l.011 70.788a17.52 17.52 0 0 0 17.5 17.5h38a17.52 17.52 0 0 0 17.5-17.5v-70.778q35.274-1.547 70.218-6.083l-.167 21.298a30 30 0 1 0 15 .027l.185-23.417q30.551-4.529 60.587-11.305a15.118 15.118 0 0 0 11.448-10.14 13.574 13.574 0 0 0-3.198-13.368Zm-45.476-90.611a346.898 346.898 0 0 1-129.87-26.808 346.569 346.569 0 0 1-71.777-40.63 549.109 549.109 0 0 0 56.558 2.932c.55 0 1.107 0 1.658-.003 2.29-.007 4.594-.03 6.895-.065a29.993 29.993 0 0 0 59.472-4.166c3.812-.477 7.62-1.007 11.423-1.565Zm-122.032-69.974a15 15 0 1 1 15 15 15.017 15.017 0 0 1-15-15ZM240.56 39.388a11.517 11.517 0 0 0 8.673-6.302l6.765-13.707 6.765 13.706a11.516 11.516 0 0 0 8.674 6.303l15.126 2.198-10.947 10.67a11.518 11.518 0 0 0-3.312 10.195l2.584 15.067-13.527-7.112a11.512 11.512 0 0 0-10.723-.002l-13.53 7.114 2.584-15.067a11.52 11.52 0 0 0-3.314-10.197l-10.945-10.668Zm-91.707 153.817L244.837 90.4l11.161-5.867 11.156 5.865 31.4 33.63a251.698 251.698 0 0 1-31.351 25.758 7.5 7.5 0 1 0 8.547 12.328 266.817 266.817 0 0 0 33.04-27.121l59.437 63.66a528.643 528.643 0 0 1-47.381 8.002 29.985 29.985 0 0 0-55.19 3.865c-2.682.048-5.367.083-8.038.09q-.807.003-1.613.003a532.956 532.956 0 0 1-80.883-6.175 266.515 266.515 0 0 0 72.824-25.494 7.5 7.5 0 0 0-6.958-13.289 253.71 253.71 0 0 1-92.135 27.55Zm-42.265 101.531 67.773-72.589a362.229 362.229 0 0 0 91.084 55.005 360.646 360.646 0 0 0 97.868 25.55A691.461 691.461 0 0 1 258.1 311.08c-14.266.027-28.7-.391-42.99-1.23a29.994 29.994 0 0 0-55.122-5.46 684.293 684.293 0 0 1-53.4-9.654Zm94.823 23.848a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-44.413 149.412a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm120.5 26.5a2.503 2.503 0 0 1-2.5 2.5h-38a2.503 2.503 0 0 1-2.5-2.5l-.01-70.264q10.75.278 21.514.288a832.61 832.61 0 0 0 21.497-.295Zm107.5-26.5a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-126.518-58.48a814.694 814.694 0 0 1-125.93-9.384 508.569 508.569 0 0 0 62.85-7.465 7.5 7.5 0 0 0-2.697-14.756 498.364 498.364 0 0 1-111.167 7.546l63.605-68.126q5.637.896 11.281 1.708a29.994 29.994 0 0 0 59.31 5.876 711.95 711.95 0 0 0 40.272 1.168q1.071 0 2.141-.003a707.217 707.217 0 0 0 91.492-6.235 488.86 488.86 0 0 1-53.323 26.846 29.975 29.975 0 0 0-49.686 18.131 486.261 486.261 0 0 1-22.239 6.2 7.5 7.5 0 1 0 3.677 14.542 501.986 501.986 0 0 0 20.328-5.604 29.992 29.992 0 0 0 56.331-20.57 505.019 505.019 0 0 0 67.863-35.92l61.868 66.264a811.908 811.908 0 0 1-175.976 19.782Zm32.846-40.478a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm70.672-7.5a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Zm-180.757-91.8a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm53.257-140.52a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5ZM146.431 357.91a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Z"></path>
</svg>
<svg class="christmas-tree christmas-tree-2" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="christmas-tree">
<path fill="#d88a55" d="M285 406.03v88.47a10.004 10.004 0 0 1-10 10h-38a10.004 10.004 0 0 1-10-10v-88.47Z"></path>
<path fill="#c57a44" d="M285 406.03v69.46l-58-59.1v-10.36h58z"></path>
<circle cx="370" cy="468" r="22.5" fill="#fed402"></circle>
<path fill="#fac600" d="M383.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"></path>
<circle cx="142" cy="468" r="22.5" fill="#fed402"></circle>
<path fill="#46cc8d" d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 6.22 6.22 0 0 1 1.75-3.86l.84-.9L240.5 204.21l8.92-9.55a7.823 7.823 0 0 1 .66-.63 9.555 9.555 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"></path>
<path fill="#00c27a" d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 617.144 617.144 0 0 0 67.78 10.19 576.568 576.568 0 0 0 76.56 2.12c60.36-2.37 124.42-16.24 158.32-24.61a14.913 14.913 0 0 0 7.31-24.66l-19.78-21.2-10.5-11.24-108.35-116.1 8.92-9.55a7.823 7.823 0 0 1 .66-.63 8.98 8.98 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"></path>
<path fill="#46cc8d" d="M409.45 301.52a695.395 695.395 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-4.89-1.11-6.84-6.05-3.72-9.4l62.83-67.29 88.8-95.11a7.993 7.993 0 0 1 11.18 0l88.79 95.11 62.83 67.29c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
<path fill="#46cc8d" d="M409.45 301.52a704.636 704.636 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a5.482 5.482 0 0 1 1.29-2.21l62.83-67.29 7.01-7.51 10.24-10.97 61.64-66.02 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.96 65.29h.01l1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
<path fill="#00c27a" d="M409.45 301.52q-7.68 1.74-16.07 3.43a696.535 696.535 0 0 1-135.25 13.63 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a698.084 698.084 0 0 0 115.64 9.26c28.51-.08 64.07-5.82 93.95-11.93 12.54-2.57 24.07-5.2 33.66-7.51 1.26-.3 2.48-.59 3.66-.88a14.503 14.503 0 0 0 7.15-23.99l-46.17-49.45-64.88-69.5 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.97 65.29 1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
<circle cx="146.433" cy="365.414" r="7.5" fill="#0067c5"></circle>
<circle cx="285" cy="376.542" r="22.5" fill="#00c27a"></circle>
<path fill="#f4d902" d="M134.43 197.67a4.263 4.263 0 0 0-.71 1.02 3.535 3.535 0 0 0-.16.34c-.04.12-.09.24-.12.36-.68 2.31.89 4.84 3.89 5.52q6.855 1.56 14.45 3.06a276.19 276.19 0 0 0 32.41-5.52c-17.94-.89-34.59-2.61-49.76-4.78zm152.91-63.44 10.25 10.98q8.58-7.365 16.54-15.49l-10.23-10.96a2.612 2.612 0 0 0-.25.23q-7.83 7.995-16.31 15.24z"></path>
<circle cx="276.328" cy="369.042" r="22.5" fill="#e53950"></circle>
<circle cx="194.053" cy="327.45" r="22.5" fill="#00c27a"></circle>
<circle cx="186.413" cy="318.588" r="22.5" fill="#e53950"></circle>
<path fill="#fac600" d="M155.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"></path>
<path fill="#46cc8d" d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02l.02-.02 3.28-3.51L240.5 84.06l11.18-11.97a6.176 6.176 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"></path>
<path fill="#00c27a" d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02 540.684 540.684 0 0 0 78.21 5.44c28.6-.08 66.39-7.53 91.83-13.41a16.884 16.884 0 0 0 8.55-27.97l-15.43-16.52-10.25-10.98-46.84-50.17 11.18-11.97a5.914 5.914 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"></path>
<circle cx="300.735" cy="230.47" r="22.5" fill="#00c27a"></circle>
<circle cx="294.064" cy="220.148" r="22.5" fill="#e53950"></circle>
<path fill="#fac600" d="m259.605 9.741 9.885 20.03a4.02 4.02 0 0 0 3.027 2.199l22.104 3.212a4.02 4.02 0 0 1 2.228 6.857l-15.994 15.59a4.02 4.02 0 0 0-1.157 3.559l3.776 22.014a4.02 4.02 0 0 1-5.833 4.238l-19.77-10.393a4.02 4.02 0 0 0-3.742 0L234.36 87.44a4.02 4.02 0 0 1-5.833-4.238l3.776-22.014a4.02 4.02 0 0 0-1.157-3.558l-15.994-15.591a4.02 4.02 0 0 1 2.228-6.857l22.104-3.212a4.02 4.02 0 0 0 3.027-2.2l9.885-20.029a4.02 4.02 0 0 1 7.21 0Z"></path>
<path fill="#ca2e43" d="M280.306 346.9a22.489 22.489 0 0 1-21.054 36.785 22.497 22.497 0 1 0 21.054-36.785zm17.678-149.073a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785zM190.39 296.445a22.489 22.489 0 0 1-21.053 36.785 22.497 22.497 0 1 0 21.053-36.785z"></path>
<path fill="#fed402" d="M230.246 73.174c1.094.087 2.196.144 3.313.144a41.522 41.522 0 0 0 41.514-40.977l-2.556-.371a4.02 4.02 0 0 1-3.027-2.2l-9.885-20.029a4.02 4.02 0 0 0-7.21 0l-9.885 20.03a4.02 4.02 0 0 1-3.027 2.199l-22.104 3.212a4.02 4.02 0 0 0-2.228 6.857l15.994 15.59a4.02 4.02 0 0 1 1.157 3.559Z"></path>
<path fill="#282828" d="M309.005 172.364a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm32.787 98.632a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5ZM446.57 380.73l-62.034-66.442q13.352-2.477 26.572-5.46a13.958 13.958 0 0 0 10.554-9.38 12.65 12.65 0 0 0-2.97-12.46l-65.432-70.08q11.608-2.098 23.033-4.678a12.637 12.637 0 0 0 9.411-8.412 11.461 11.461 0 0 0-2.68-11.294L288.414 91.19a11.435 11.435 0 0 0 2.451-9.258l-3.467-20.212 14.686-14.314a11.52 11.52 0 0 0-6.385-19.65l-20.294-2.948-9.075-18.389a11.52 11.52 0 0 0-20.662 0l-9.075 18.389-20.292 2.949a11.52 11.52 0 0 0-6.386 19.65L224.6 61.72l-3.467 20.21a11.436 11.436 0 0 0 2.45 9.258l-94.615 101.337a11.471 11.471 0 0 0-2.68 11.303c.025.084.066.16.094.243a7.418 7.418 0 0 0 .41 1.06 12.733 12.733 0 0 0 8.876 7.093q11.464 2.596 23.063 4.688L93.3 286.988a12.664 12.664 0 0 0-2.97 12.474 13.912 13.912 0 0 0 10.514 9.357q13.18 2.986 26.62 5.466L65.427 380.73a13.593 13.593 0 0 0-3.199 13.385c.06.196.132.386.2.578.02.057.039.114.06.17a15.144 15.144 0 0 0 11.142 9.365q30.028 6.8 60.632 11.316l.184 23.416a30 30 0 1 0 15.001-.027l-.167-21.301q34.891 4.519 70.207 6.076l.011 70.788a17.52 17.52 0 0 0 17.5 17.5h38a17.52 17.52 0 0 0 17.5-17.5v-70.778q35.274-1.547 70.218-6.083l-.167 21.298a30 30 0 1 0 15 .027l.185-23.417q30.551-4.529 60.587-11.305a15.118 15.118 0 0 0 11.448-10.14 13.574 13.574 0 0 0-3.198-13.368Zm-45.476-90.611a346.898 346.898 0 0 1-129.87-26.808 346.569 346.569 0 0 1-71.777-40.63 549.109 549.109 0 0 0 56.558 2.932c.55 0 1.107 0 1.658-.003 2.29-.007 4.594-.03 6.895-.065a29.993 29.993 0 0 0 59.472-4.166c3.812-.477 7.62-1.007 11.423-1.565Zm-122.032-69.974a15 15 0 1 1 15 15 15.017 15.017 0 0 1-15-15ZM240.56 39.388a11.517 11.517 0 0 0 8.673-6.302l6.765-13.707 6.765 13.706a11.516 11.516 0 0 0 8.674 6.303l15.126 2.198-10.947 10.67a11.518 11.518 0 0 0-3.312 10.195l2.584 15.067-13.527-7.112a11.512 11.512 0 0 0-10.723-.002l-13.53 7.114 2.584-15.067a11.52 11.52 0 0 0-3.314-10.197l-10.945-10.668Zm-91.707 153.817L244.837 90.4l11.161-5.867 11.156 5.865 31.4 33.63a251.698 251.698 0 0 1-31.351 25.758 7.5 7.5 0 1 0 8.547 12.328 266.817 266.817 0 0 0 33.04-27.121l59.437 63.66a528.643 528.643 0 0 1-47.381 8.002 29.985 29.985 0 0 0-55.19 3.865c-2.682.048-5.367.083-8.038.09q-.807.003-1.613.003a532.956 532.956 0 0 1-80.883-6.175 266.515 266.515 0 0 0 72.824-25.494 7.5 7.5 0 0 0-6.958-13.289 253.71 253.71 0 0 1-92.135 27.55Zm-42.265 101.531 67.773-72.589a362.229 362.229 0 0 0 91.084 55.005 360.646 360.646 0 0 0 97.868 25.55A691.461 691.461 0 0 1 258.1 311.08c-14.266.027-28.7-.391-42.99-1.23a29.994 29.994 0 0 0-55.122-5.46 684.293 684.293 0 0 1-53.4-9.654Zm94.823 23.848a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-44.413 149.412a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm120.5 26.5a2.503 2.503 0 0 1-2.5 2.5h-38a2.503 2.503 0 0 1-2.5-2.5l-.01-70.264q10.75.278 21.514.288a832.61 832.61 0 0 0 21.497-.295Zm107.5-26.5a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm-126.518-58.48a814.694 814.694 0 0 1-125.93-9.384 508.569 508.569 0 0 0 62.85-7.465 7.5 7.5 0 0 0-2.697-14.756 498.364 498.364 0 0 1-111.167 7.546l63.605-68.126q5.637.896 11.281 1.708a29.994 29.994 0 0 0 59.31 5.876 711.95 711.95 0 0 0 40.272 1.168q1.071 0 2.141-.003a707.217 707.217 0 0 0 91.492-6.235 488.86 488.86 0 0 1-53.323 26.846 29.975 29.975 0 0 0-49.686 18.131 486.261 486.261 0 0 1-22.239 6.2 7.5 7.5 0 1 0 3.677 14.542 501.986 501.986 0 0 0 20.328-5.604 29.992 29.992 0 0 0 56.331-20.57 505.019 505.019 0 0 0 67.863-35.92l61.868 66.264a811.908 811.908 0 0 1-175.976 19.782Zm32.846-40.478a15 15 0 1 1-15-15 15.017 15.017 0 0 1 15 15Zm70.672-7.5a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Zm-180.757-91.8a7.5 7.5 0 1 0-7.5-7.5 7.5 7.5 0 0 0 7.5 7.5Zm53.257-140.52a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5ZM146.431 357.91a7.5 7.5 0 1 0 7.5 7.5 7.5 7.5 0 0 0-7.5-7.5Z"></path>
</svg>
<div class="cloud-container">
<svg class="cloud" version="1.0" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 50.000000 50.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none">
<path d="M204 378 c-28 -25 -44 -32 -69 -29 -26 2 -37 -4 -54 -26 -12 -15 -35
-43 -51 -60 -32 -35 -37 -66 -18 -108 22 -49 51 -55 248 -55 l182 0 29 29 c46
46 33 119 -26 141 -15 6 -25 20 -29 44 -4 22 -19 46 -42 65 -29 26 -43 31 -84
31 -41 0 -55 -5 -86 -32z"/>
</g>
</svg>
<svg class="cloud" version="1.0" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 50.000000 50.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,50.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none">
<path d="M204 378 c-28 -25 -44 -32 -69 -29 -26 2 -37 -4 -54 -26 -12 -15 -35
-43 -51 -60 -32 -35 -37 -66 -18 -108 22 -49 51 -55 248 -55 l182 0 29 29 c46
46 33 119 -26 141 -15 6 -25 20 -29 44 -4 22 -19 46 -42 65 -29 26 -43 31 -84
31 -41 0 -55 -5 -86 -32z"/>
</g>
</svg>
</div>
<svg class="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
<path fill="#FF9800" d="M11 11H37V37H11z"/>
<path fill="#FF9800" d="M11.272 11.272H36.728V36.728H11.272z" transform="rotate(-45.001 24 24)"/>
<path fill="#FFEB3B" d="M13,24c0,6.077,4.923,11,11,11c6.076,0,11-4.923,11-11s-4.924-11-11-11C17.923,13,13,17.923,13,24"/>
</svg>
</div>
<div class="snowflake-container">
<svg class="snowflake" fill="#87ceeb" height="20px" width="20px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 298 298" xml:space="preserve">
<g>
<path d="M289.5,140.5h-24.606l11.031-11.03c2.93-2.929,2.93-7.678,0.001-10.606c-2.929-2.929-7.678-2.93-10.606-0.001
L243.681,140.5h-36.369l16.182-17.392c2.821-3.032,2.65-7.777-0.383-10.6c-1.243-1.156-2.775-1.802-4.345-1.961
c-0.952-0.047-21.495-0.003-21.495-0.003L221.315,86.5H251.5c4.143,0,7.5-3.357,7.5-7.5s-3.357-7.5-7.5-7.5h-15.186l17.69-17.69
c2.929-2.93,2.929-7.678,0-10.608c-2.93-2.928-7.844-2.928-10.774,0L225.167,61.1V45.5c0-4.143-3.357-7.5-7.5-7.5
c-4.143,0-7.5,3.357-7.5,7.5v30.601l-24.837,25.004l-0.415-22.645c-0.001-0.036,0.035-0.07,0.034-0.106
c-0.035-1.824-0.704-3.641-2.07-5.059c-2.873-2.982-7.778-3.07-10.761-0.194l-15.951,15.226V53.107l21.47-21.304
c2.929-2.93,3.012-7.678,0.083-10.607c-2.93-2.928-7.803-2.928-10.732,0l-10.821,10.696V7.5c0-4.143-3.357-7.5-7.5-7.5
c-4.143,0-7.5,3.357-7.5,7.5v24.393l-10.53-10.696c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-3.054,7.678-0.125,10.607
l21.179,21.304v35.421l-16.176-15.475c-3.009-2.847-7.67-2.718-10.52,0.289c-1.075,1.136-1.683,2.52-1.914,3.955
c-0.142,0.583-0.203,1.188-0.201,1.811l-0.088,21.229l-25.1-24.944V45.5c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v14.894
L55.142,43.202c-2.93-2.928-7.594-2.928-10.524,0c-2.929,2.93-2.887,7.678,0.042,10.608L62.392,71.5H46.5
c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h30.892l24.744,24.744l-23.057,0.831c-4.021,0.146-7.524,3.435-7.563,7.418
c-0.004,0.112-0.349,0.225-0.349,0.337c0,0.003,0,0.007,0,0.011c0,0.008,0.345,0.017,0.345,0.024
c0.045,1.875,0.955,3.736,2.395,5.158L89.748,140.5H55.025l-21.638-21.638c-2.93-2.928-7.678-2.928-10.607,0
c-2.929,2.93-2.929,7.678,0,10.607l11.03,11.03H8.5c-4.143,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h25.02L22.78,166.239
c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196c1.919,0,3.839-0.732,5.304-2.196L54.734,155.5h35.027
l-15.253,16.394c-2.821,3.032-2.65,7.777,0.383,10.6c1.444,1.344,3.277,2.009,5.106,2.009c0.034,0,0.068-0.005,0.103-0.005
c0.022,0,0.044,0.003,0.065,0.003c0.018,0,0.037,0,0.055,0l22.005-0.125L77.101,209.5H46.5c-4.143,0-7.5,3.357-7.5,7.5
s3.357,7.5,7.5,7.5h15.601l-17.399,17.399c-2.929,2.93-2.929,7.678,0,10.607c1.465,1.464,3.385,2.196,5.304,2.196
c1.919,0,3.672-0.732,5.137-2.196l17.025-17.191V250.5c0,4.143,3.357,7.5,7.5,7.5s7.5-3..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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