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

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

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