css+svg模拟黄昏白天日落夜晚切换动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+svg模拟黄昏白天日落夜晚切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<style>
body {
  background: radial-gradient(#870000, #53346d);
  font-family: "Comfortaa", sans-serif;
}

.main-content {
  max-width: 700px;
  margin: 4em auto 0;
  text-align: center;
}

h1 {
  margin: 2em 0;
  color: #fff;
}

svg {
  display: inline-block;
}

path, polygon, circle, rect {
  transition: fill 1s ease;
}

.window {
  position: relative;
  background: #fff;
  margin: 0 auto 2em;
  display: inline-block;
  padding: 10px;
}
.window:before {
  content: '';
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  height: 18px;
  top: 100%;
  width: 112%;
  margin-left: -6%;
  background: #f4c7c7;
}

.cat {
  position: absolute;
  z-index: 10;
  bottom: -5px;
  right: -35px;
}

.illustration {
  position: relative;
  align-self: end;
  margin: auto;
  width: 250px;
  overflow: hidden;
}

.mountain, .hill, .land, .trees, .sun, .clouds, .moon, .stars {
  position: absolute;
  left: 0;
  margin: auto;
  right: 0;
}

.mountain {
  bottom: 45px;
}

.hill {
  bottom: 45px;
}

.trees {
  bottom: 25px;
}

.sun {
  top: 120px;
  margin-left: -20px;
  transition: all 1s ease;
  transform: scale(0.2);
}

.moon, .stars {
  top: 25px;
  opacity: 0;
}

.land {
  bottom: 3px;
}

.clouds {
  top: 50px;
  right: -500px;
  transition: all 1s ease .1s;
}

.day .sun {
  top: 10px;
  margin-left: 0;
  transform: scale(1);
}
.day .clouds {
  right: 0;
}

.night .stars, .night .moon {
  opacity: 1;
  transition: all 1s ease .5s;
}
.night #sky {
  fill: #17377f;
}
.night #mountain {
  fill: #73addf;
}
.night #hill {
  fill: #659fcd;
}
.night #land {
  fill: #508bb5;
}
.night .trees {
  fill: #1c2c3b;
}
.night .trunks {
  fill: #3f3e3d;
}

.sunset .sun {
  top: 60px;
  margin-left: -80px;
  transform: scale(1);
}
.sunset #sun {
  fill: #fff;
}
.sunset #sky {
  fill: url(#sky_sunset);
}
.sunset #mountain {
  fill: #efbb2b;
}
.sunset #hill {
  fill: #e6ad28;
}
.sunset #land {
  fill: #de9f26;
}
.sunset .trees {
  fill: #747c0b;
}
.sunset .trunks {
  fill: #3f3e3d;
}

.dusk .sun {
  top: 60px;
  margin-left: 140px;
  transform: scale(1);
}
.dusk #sun {
  fill: #ffffda;
}
.dusk #sky {
  fill: url(#sky_dusk);
}
.dusk #mountain {
  fill: #f1a3a2;
}
.dusk #hill {
  fill: #e09c9c;
}
.dusk #land {
  fill: #c4918d;
}
.dusk .trees {
  fill: #ce791c;
}
.dusk .trunks {
  fill: #8c5f50;
}

.option-wrapper {
  display: flex;
  margin: 3em auto;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 5px;
  max-width: 300px;
  font-size: 12px;
  line-height: 1.2;
}
.option-wrapper .option {
  transition: all 200ms ease;
  padding: 10px 10px 8px;
  width: 50%;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.option-wrapper .option.active {
  background: #fff;
  color: #333;
  pointer-events: none;
}

aside.context {
  text-align: center;
  color: #fff;
}
aside.context a {
  text-decoration: none;
  color: #fff;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context .explanation {
  max-width: 700px;
  margin: 4em auto;
}

footer {
  text-align: center;
  margin: 8em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}
</style>
</head>
<body>

<div class="main-content">
  <h1>一天中最喜欢的时段是什么时候？</h1>
  <div class="window">
    <div class="cat">
      <svg width="80px" viewBox="0 0 15.59 15.59">
        <path d="M14.42,11.993c-0.104-1.334-0.709-2.336-1.57-3.153c-0.479-0.449-0.906-0.563-1.414-0.563c0,0-0.204,0.005-0.041,0.212  c0.215,0.271,1.791,2.328,1.768,4.011c-0.029,1.948-1.958,1.837-1.958,1.837c0.812-1.542,0.402-3.001,0.276-3.512  c-0.238-0.943-0.709-1.857-1.417-2.738C9.191,6.988,8.312,6.468,7.425,6.523c-0.379-0.654-0.716-1.18-1.011-1.61  C8.02,3.479,6.974,2.787,6.063,0c-0.211,0.591-0.38,1.028-0.507,1.31c-0.644-0.08-2.071-0.08-2.714,0  C2.716,1.028,2.547,0.591,2.336,0C1.423,2.794,0.374,3.467,1.999,4.909c0.173,3.278,0.849,4.149,1.942,5.732  c0.9,1.304,0.675,1.768,1.098,3.569c-3.197,2.014,2.223,1.241,3.063,1.2C10.266,15.305,14.777,16.6,14.42,11.993z"></path>
      </svg>
    </div>
    <div class="illustration">
      <div class="time dusk">
        <div class="sky">
          <svg width="250px" viewBox="0 0 113.39 99.21">
            <linearGradient id="sky_sunset" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(-25)">
              <stop offset="0%" stop-color="#f7ffa9" stop-opacity="1"></stop>
              <stop offset="40%" stop-color="#ffcc33" stop-opacity="1"></stop>
              <stop offset="100%" stop-color="#ffbe1d" stop-opacity="1"></stop>
            </linearGradient>
            <linearGradient id="sky_dusk" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(45)">
              <stop offset="0%" stop-color="#ffd4fe" stop-opacity="1"></stop>
              <stop offset="30%" stop-color="#ffd4fe" stop-opacity="1"></stop>
              <stop offset="100%" stop-color="#ffd26a" stop-opacity="1"></stop>
            </linearGradient>
            <polygon fill="#B3EFFF" id="sky" points="111.971,97.368 111.971,1.842 1.419,1.842 1.419,9.042 1.419,97.368"></polygon>
          </svg>
        </div>
        <div class="sun">
          <svg width="90px" viewBox="0 0 90.71 90.71">
            <g>
              <circle opacity="0.1" fill="#FFECDC" cx="45.355" cy="45.354" r="43.212"></circle>
              <circle opacity="0.3" fill="#FFEBDE" cx="45.355" cy="45.354" r="31.131"></circle>
              <circle id="sun" fill="#f9db5a" cx="45.355" cy="45.354" r="21.374"></circle>
            </g>
          </svg>
        </div>
        <div class="clouds">
          <svg width="80px" viewBox="0 0 42.52 19.84">
            <g>
              <path fill="#fff" d="M38.582,8.005c1.865,0,3.393,1.673,3.393,3.717l0,0c0,2.042-1.527,3.716-3.393,3.716H24.039h.........完整代码请登录后点击上方下载按钮下载查看