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.37.........完整代码请登录后点击上方下载按钮下载查看