svg实现手机昼夜切换太阳月亮升起落下交替效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg实现手机昼夜切换太阳月亮升起落下交替效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  -webkit-animation: bg-anim 15s ease infinite;
          animation: bg-anim 15s ease infinite;
  background-image: linear-gradient(-45deg, #4571d8, #21586f, #666b7a, #2b5ea5);
  background-size: 400% 400%;
}

.container {
  position: relative;
  width: 263px;
  height: 525px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.device {
  position: absolute;
}

.layer1,
.layer2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.01);
}

.layer2 {
  opacity: 0;
  transition: 4s;
}

.layer1 {
  opacity: 1;
  transition: 4s;
}

.moon {
  transform: translate(-50px, 230px);
  transition: 4s;
}

.rising-star {
  transform: translate(225px, -160px);
  transition: 4s;
}

.sun {
  transition: 5s;
}

.cloud1,
.cloud2,
.cloud3,
.cloud4 {
  transition: 4s;
}

.light-mode .layer2 {
  opacity: 1;
}
.light-mode .moon,
.light-mode .rising-star {
  transform: none;
  transition-delay: 1s;
}
.light-mode .sun {
  transform: translate(64px, -290px);
}
.light-mode .cloud1 {
  transform: translateX(-140px);
}
.light-mode .cloud2 {
  transform: translateX(-100px);
}
.light-mode .cloud3 {
  transform: translateX(-200px);
}
.light-mode .cloud4 {
  transform: translateX(-180px);
}

.toggle {
  width: 45px;
  height: 24px;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 1;
  cursor: pointer;
}

:root {
  --mountainY: 0;
}

.mountain3 {
  transform: translateX(29px) scaleX(1.04) translateY(var(--mountainY));
}

[class*=mountain] {
  transform: translateY(var(--mountainY));
  -webkit-animation: goUp 2s both;
          animation: goUp 2s both;
}

.mountain2 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.mountain3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

.mountain4 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

.mountain5 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

.mountain6 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.mountain7 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.right {
  -webkit-animation: goLeft 2s 0.2s both;
          animation: goLeft 2s 0.2s both;
}

.tree {
  -webkit-animation: goUp 2s both;
          animation: goUp 2s both;
}

.sun {
  -webkit-animation: fadeIn 2s 2s both;
          animation: fadeIn 2s 2s both;
}

.sky {
  -webkit-animation: sky 2s 2s both;
          animation: sky 2s 2s both;
}

.m3 {
  transform: translateX(26px) scaleX(1.1);
}

@-webkit-keyframes goUp {
  from {
    transform: translateY(200px);
  }
}

@keyframes goUp {
  from {
    transform: translateY(200px);
  }
}
@-webkit-keyframes sky {
  from {
    transform: scale(2);
  }
}
@keyframes sky {
  from {
    transform: scale(2);
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
}
@-webkit-keyframes goLeft {
  from {
    transform: translateX(200px);
  }
}
@keyframes goLeft {
  from {
    transform: translateX(200px);
  }
}
@-webkit-keyframes bg-anim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bg-anim {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>


</head>

<body>
  <svg class="device" width="278" height="555" viewBox="0 0 278 555" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.311859" y="0.0585327" width="277.05" height="554.736" rx="25.4758" fill="#0E0E0E"/>
</svg>
<div class="container">
 <div class="toggle"></div>
 <div class="layer1">
  <svg width="263" height="525" viewBox="0 0 263 525" fill="none" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_2_4" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="263" height="525">
 <rect x="0.440352" y="0.503279" width="261.446" height="523.847" rx="25.3166" fill="#1D1D1D" stroke="url(#paint0_linear_2_4)" stroke-width="0.318448"/>
 </mask>
 <g mask="url(#mask0_2_4)">
 <path class="sky" d="M-28.3643 -12.4545L-28.3643 524.308H273.612L273.612 -12.4545H-28.3643Z" fill="url(#paint1_linear_2_4)"/>
 <path class="mountain7" d="M-28.3642 354.192L-25.4428 351.921L-22.9589 353.628L-13.6726 346.756L-9.63626 346.897L-2.22693 338.516H3.02311L6.05741 333.45L10.9264 330.91L18.3075 320.412L33.7189 346.051L38.7714 346.756L39.9568 352.626L51.346 359.597L52.0658 366.088L56.2997 371.026L58.0779 378.025L68.6486 378.434L81.1809 386.195L81.7031 393.25L87.2354 397.032L91.4693 401.787L103.127 398.866L116.167 408.899H121.107L124.395 414.712L130.195 413.301L142.276 424.83H153.27L157.561 429.768L168.385 434.03L173.042 432.83L192.349 446.461L219.658 469.743L-30.58 471.366L-28.3642 354.192Z" fill="#F4815F"/>
 <g class="mountain7" style="mix-blend-mode:screen" opacity="0.5">
 <g style="mix-blend-mode:screen" opacity="0.5">
 <path d="M18.3074 320.412L17.2489 332.519L17.7852 336.752L13.7206 340.632L13.142 345.811L9.13391 349.804L18.3074 348.986L22.7812 346.756L33.7188 346.051L18.3074 320.412Z" fill="#F9B69C"/>
 </g>
 <g style="mix-blend-mode:screen" opacity="0.5">
 <path d="M39.9567 352.626L32.0675 358.045L29.5978 363.322L22.8941 366.271L20.9324 371.097L35.6664 367.851L40.0696 361.854L47.7189 366.976L52.0657 366.087L51.3459 359.597L39.9567 352.626Z" fill="#F9B69C"/>
 </g>
 <g style="mix-blend-mode:screen" opacity="0.5">
 <path d="M58.0779 378.025L53.1243 380.607H64.4147L68.2111 383.994L76.1426 386.463L76.7918 391.67L81.7031 393.25L81.1809 386.195L68.6486 378.434L58.0779 378.025Z" fill="#F9B69C"/>
 </g>
 <g style="mix-blend-mode:screen" opacity="0.5">
 <path d="M91.4694 401.787L98.7517 402.958L102.633 401.787L105.935 404.609L116.167 408.899L103.127 398.866L91.4694 401.787Z" fill="#F9B69C"/>
 </g>
 <g style="mix-blend-mode:screen" opacity="0.5">
 <path d="M36.8238 374.794L40.5355 383.02H43.6122L50.6263 391.218L63.0176 393.039L71.4854 401.364L77.314 403.071L80.6588 414.416L71.4854 407.488H60.5478L58.7413 399.953L46.3924 398.782L40.5355 401.716L37.8682 397.695L41.3964 391.204L35.4972 386.689L36.8238 374.794Z" fill="#F9B69C"/>
 </g>
 </g>
 <path class="mountain6" d="M-36.7332 394.139L-26.8541 391.317L-21.6746 394.139L-16.1705 391.317L-8.76122 398.965L1.14611 400.249L4.64613 405.597L15.7531 406.486L23.487 411.128L29.1322 410.013L33.7189 416.363L40.7331 421.782L51.967 424.829L52.0658 428.823H62.0578L68.6486 422.953L72.6426 424.59L81.7031 424.124L103.818 432.35L98.5258 445.276V462.42H-40.7272L-36.7332 394.139Z" fill="#C75378"/>
 <path class="mountain5" d="M46.7311 441.282L60.1808 436.696L64.076 438.996L69.0014 436.696L77.1164 438.996L83.8201 432.11H93.3463L96.4371 428.794L101.546 423.179L109.844 421.302L113.726 418.042L127.33 417.182L132.27 418.353L136.179 415.065L143.066 408.899L147.794 410.126L153.44 407.502L159.268 403.537L162.5 397.427H165.901L176.218 385.193L199.307 383.782L225.656 367.089L247.362 375.443L255.575 368.26L279.61 363.322V457.862L173.198 481.822L97.4532 483.035L26.9305 448.464L39.7169 441.635L46.7311 441.282Z" fill="#A65574"/>
 <g class="mountain5" style="mix-blend-mode:screen" opacity="0.58">
 <g style="mix-blend-mode:screen" opacity="0.58">
 <path d="M165.901 397.427H170.22L173.042 393.547H178.617L184.841 386.957L199.307 383.782L176.218 385.193L165.901 397.427Z" fill="#63BACD"/>
 </g>
 <g style="mix-blend-mode:screen" opacity="0.58">
 <path d="M93.3464 432.111L98.6388 431.292L100.756 428.004L107.812 428.823L114.516 424.477H126.159L128.516 421.655H114.276L113.726 418.042L109.845 421.302L101.546 423.179L93.3464 432.111Z" fill="#63BACD"/>
 </g>
 <g style="mix-blend-mode:screen" opacity="0.58">
 <path d="M132.27 418.353L138.748 417.421L141.57 413.894H149.911L156.036 414.486L159.565 410.719L158.506 407.897L159.268 403.537L153.44 407.502L147.794 410.126L143.066 408.899L132.27 418.353Z" fill="#63BACD"/>
 </g>
 </g>
 <path class="mountain4" d="M56.4125 462.462L67.4207 457.044H80.6587L90.2837 453.121L98.5257 455.872L121.332 444.231L128.516 446.701H149.953L159.917 442.933L167.905 445.529L188.567 454.701L211.105 462.462L203.188 488.792L31.5454 490.203L56.4125 462.462Z" fill="#6D5670"/>
  <g class="m3">
 <path class="mountain3"  transform="20px" d="M228.097 414.486L225.275 412.37L223.694 414.486H220.871L219.996 416.786H217.88L214.323 421.02H211.896L210.668 423.842H208.381V426.494H206.97L205.234 428.611H203.117L201.184 431.786H199.603L197.317 434.439H194.96L193.549 436.033H191.813L190.232 439.208H188.468L186.182 443.088H182.456L180.014 445.741C180.014 445.741 177.94 445.219 177.657 445.741C177.375 446.263 175.258 449.622 175.258 449.622L170.319 449.974C170.319 449.974 168.71 452.627 167.567 452.444C166.423 452.26 164.49 451.922 164.49 451.922L159.198 454.391H157.476L156.206 456.691L152.508 456.874L150.927 459.88C148.507 460.983 146.152 462.222 143.871 463.591C143.165 464.296 140.145 467.655 140.145 467.655H135.403C134.513 468.375 133.57 469.026 132.58 469.602C131.087 470.06 129.55 470.358 127.994 470.491H124.113L121.826 473.144H106.302L103.479 471.733L100.135 472.085L98.2012 469.447L95.7314 469.094L93.8403 467.302H91.935L89.2959 465.468L85.5983 466.173L81.5478 463.887L78.7252 464.593L75.5498 462.758H73.9127L71.2736 461.249L67.9429 462.744L64.2171 458.765L59.2775 459.471L55.2412 455.054L52.4186 455.943L50.8379 451.541L45.2774 451.188L39.5475 446.433L35.3136 446.616L33.1402 442.03L30.8963 442.736L29.8378 441.677L27.368 442.736L23.4305 438.855L21.7228 439.561L19.4365 434.806L17.8558 435.342L16.0917 433.578L13.7348 433.761L10.7993 429.528H6.33963L4.43437 426.311L3.02307 425.789L0.129906 426.325V423.094H-3.68061L-7.02539 417.45L-20.461 412.342L-28.3643 404.087V531.364H228.097V414.486Z" fill="#504F6D"/>
  </g>
 <path class="mountain2" d="M-29.8461 419.778L-27.828 419.242V416.151L-26.6707 413.329L-25.5981 416.547V419.143L-24.6102 421.612L-23.3118 420.032L-22.2533 415.926L-21.5053 419.27L-21.1384 423.164H-18.6404L-17.7795 421.499V420.737L-16.9751 418.014L-16.6081 421.231L-17.1585 421.979L-16.6081 423.15L-15.5497 422.402V421.288L-15.1122 419.425L-14.6182 421.711V422.642L-13.8702 423.813L-13.0658 425.055V426.198L-12.2896 425.916V424.745L-11.6686 424.194L-11.8944 423.32L-11.4428 422.148L-10.85 423.559L-11.1887 423.969L-10.9206 425.14V425.718L-10.5113 426.551L-10.1867 425.888L-10.2573 425.422L-9.89034 424.59L-9.72099 425.662L-9.89034 426.057L-9.6363 426.946L-9.18469 426.466L-8.90243 425.21L-8.7613 426.438L-8.3238 427.398L-8.14033 428.061L-7.77339 427.299L-7.32177 426.255L-7.13831 428.061V428.893L-6.89838 429.345L-6.07983 430.488L-5.92459 431.109L-5.4024 430.77L-5.24716 429.571L-4.75321 428.639L-4.59796 430.149V431.264C-4.59796 431.264 -4.16046 432.012 -4.13223 432.096C-4.10401 432.181 -4.03344 433.084 -4.03344 433.084L-3.51126 432.379V431.758L-3.35602 430.77L-3.14433 431.758L-2.89029 432.435L-3.04553 433.451L-2.36811 434.777L-2.05762 434.001L-2.21286 433.07L-1.87415 431.363L-1.43665 433.07V433.691L-1.15439 434.961L-0.970921 436.16C-0.74427 435.8 -0.536987 435.428 -0.349949 435.045C-0.349949 434.947 -0.505192 434.241 -0.505192 434.241L0.0452156 433.042L0.256912 435.088V436.019C0.256912 436.019 0.539173 436.979 0.567398 437.162C0.595623 437.345 1.6541 437.162 1.6541 437.162V435.836L2.02104 434.848L2.23273 436.259V437.303L2.67023 438.545L3.22064 437.896V436.386L3.65815 438.545V439.688L3.96863 440.647L4.46259 439.533L4.90009 438.051V439.377L5.29525 440.337V440.958L6.22671 440.647V439.504L6.48075 438.178L6.94647 439.589V440.732L7.44043 442.707L8.03318 442.115L8.21665 441.635L7.90616 440.958L8.56947 439.617L8.93641 441.226C8.93641 441.226 8.7106 441.818 8.7106 441.861C8.7106 441.903 9.00698 442.764 9.00698 442.764L9.50093 443.808L9.37391 444.104L9.6844 443.653V443.004L9.85376 442.482L10.0655 443.088V443.61L10.2771 444.372H11.2792L11.8013 443.639L12.38 442.101L12.9022 443.949L12.507 445.007L13.1139 446.884L13.7348 446.249C13.8484 445.787 13.9052 445.314 13.9042 444.838L14.7792 441.79V446.644L15.132 447.886L15.8659 447.096L16.1623 446.037L16.5998 443.864L17.0091 446.221L16.6844 447.632L17.0091 449.509H18.4204V448.479L18.5615 446.602C18.7228 446.121 18.9112 445.65 19.126 445.191V450.666C19.126 450.666 19.9728 451.752 19.9728 451.639C19.9728 451.526 20.5373 450.228 20.5373 450.228L21.0595 448.436L21.4123 450.849V452.557L21.8357 453.699C21.8357 453.699 22.5837 452.528 22.6119 452.444C22.6401 452.359 22.3155 451.414 22.4002 451.272C22.4849 451.131 23.1623 449.015 23.1623 449.015L23.7551 451.625L23.1623 452.768L23.6845 454.447L24.5313 455.647C24.9766 455.246 25.4006 454.822 25.8014 454.377C25.6808 453.916 25.6238 453.442 25.6321 452.966C25.7168 452.641 26.0978 450.764 26.0978 450.764L26.4789 453.883C26.338 454.124 26.2558 454.395 26.239 454.673C26.239 454.998 26.4789 457.058 26.4789 457.058C26.4789 457.058 27.4809 456.493 27.4809 456.324C27.4809 456.155 27.5656 454.532 27.5656 454.419C27.5656 454.306 27.9466 453.008 27.9466 453.008L28.3277 454.715V455.858L28.737 457.269V458.68L29.4991 460.388L30.5293 458.977V456.564L31.9406 453.008C32.0253 452.796 32.2652 456.155 32.2934 456.239C32.3217 456.324 31.7713 457.919 31.7713 458.003C31.7713 458.088 32.2652 460.063 32.2652 460.063L32.1805 461.206L33.239 462.208L34.6503 460.797L34.3398 458.553L35.0031 454.8L35.7088 459.259L35.356 461.333C35.5531 462.292 35.6852 463.263 35.7511 464.24C35.6822 465.328 35.7247 466.42 35.8781 467.5L37.0213 470.322L37.6423 468.643L37.4165 466.921L38.2915 463.873V461.94L38.9548 464.677V466.314L39.3499 469.362V470.336L40.3661 469.673L40.4508 467.387L41.4245 464.917V463.633L42.1302 468.219C42.0859 468.849 42.0859 469.48 42.1302 470.11C42.2149 470.378 42.5254 471.831 42.5254 471.831L43.104 470.957L43.6262 468.36L44.3742 466.78V468.812L44.106 471.154L44.3742 472.791L45.5173 473.412L46.3923 472.128L46.1665 470.237L46.9568 468.346L47.5355 472.311L48.2411 474.654L50.6262 475.839C50.6262 475.839 51.7694 473.017 51.7694 472.847C51.7694 472.678 51.9811 469.503 51.9811 469.503L52.9266 468.36V471.535L52.4045 472.946L52.9266 475.02L52.4891 476.163L53.4206 478.59L52.6303 479.296L53.7311 481.497L55.0154 479.155L54.7472 477.828C54.7472 477.828 55.7634 476.333 55.6222 476.107C55.4748 475.708 55.3615 475.297 55.2835 474.879C55.2835 474.879 56.2714 469.884 56.3279 470.11L57.2593 474.527C57.2104 474.756 57.1346 474.978 57.0335 475.19C56.8783 475.5 57.9085 477.349 57.9085 477.349L57.471 478.28L57.9085 480.044C57.9085 480.044 59.1928 477.49 59.1364 477.349C58.921 476.668 58.7466 475.976 58.6142 475.274L59.4469 472.537L60.2372 475.543L60.7594 476.812V478.887L62.1707 479.987L63.8924 476.643V473.821L64.2453 472.283C64.2453 472.283 64.7675 473.877 64.8239 474.089C64.7941 474.436 64.7182 474.778 64.5981 475.105L65.6566 479.733L66.715 477.843C66.6228 477.377 66.5662 476.905 66.5457 476.431C66.5457 476.163 67.2937 473.482 67.2937 473.482L68.2251 476.7L67.7876 477.532L68.6627 480.354L71.4853 481.441L72.7695 478.534V477.433L73.207 475.796L74.082 478.266C74.082 478.266 73.6869 478.661 73.7292 478.802C73.7716 478.943 74.3925 481.455 74.3925 481.455L75.9732 480.933V478.774C75.9732 478.774 76.5518 477.193 76.6365 477.447L77.9208 481.455V482.386L79.8119 482.697C80.0531 481.809 80.2463 480.91 80.3905 480.001C80.3905 479.733 81.0962 478.675 81.0962 478.59C81.0962 478.506 80.5176 476.657 80.5176 476.657L81.0962 473.172L81.8865 476.615V482.443C81.8865 482.443 83.2978 480.326 83.2978 480.199C83.2978 480.072 83.566 477.913 83.566 477.913L84.314 481.003L85.4995 483.741L86.1204 481.709L85.81 480.735C85.9464 480.095 86.1208 479.464 86.3321 478.844L87.3906 481.892L88.........完整代码请登录后点击上方下载按钮下载查看