可爱的svg太阳动画

下载代码

html

css

分享到微信朋友圈

html

</svg>
	</div>
	<div id="moon">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170">
		  <g>
			<path id="Fill-7" fill="#FDF49C" d="M0 84.5a84.5 84.5 0 1 0 169 0 84.5 84.5 0 0 0-169 0"/>
			<path id="Fill-8" fill="#DED985" d="M169 84.5a84.5 84.5 0 0 1-153 49.7 84.5 84.5 0 0 0 113.7-121 84.5 84.5 0 0 1 39.4 71.3"/>
			<path id="Fill-9" fill="#FDF6AD" d="M153.3 35A84.5 84.5 0 0 0 39.6 156 84.5 84.5 0 1 1 153.3 35"/>
			<path id="Fill-13" fill="#BDB974" d="M85.6 144.2a7 7 0 1 0 14 0 7 7 0 0 0-14 0"/>
			<path id="Fill-14" fill="#BDB974" d="M107.3 138.4a12.8 12.8 0 1 0 25.7 0 12.8 12.8 0 0 0-25.7 0"/>
			<path id="Fill-15" fill="#DED985" d="M94.6 120.5a5 5 0 1 0 10 0 5 5 0 0 0-10 0"/>
		  </g>
		  <g id="Mouth" transform="translate(51 90.4)">
			<path id="Fill-10" fill="#D75346" d="M27.9 13.6H0A13.8 13.8 0 0 1 5.7 2.7a13.9 13.9 0 0 1 22.1 10.8"/>
			<path id="Fill-11" fill="#E69589" d="M22.2 13.6H5.7a13.9 13.9 0 0 1 16.5 0"/>
			<path id="Fill-12" fill="#FFFDF8" d="M23.5 3.8H4.3c.5-.4.9-.8 1.4-1a13.9 13.9 0 0 1 17.8 1"/>
		  </g>
		  <g id="Eyes" fill="#152B33" transform="translate(23 58.7)">
			<path id="Fill-16" d="M11.7 7.5C4 7.5.7 4 .6 3.8a2.2 2.2 0 0 1 3.3-3c.3.2 5.7 5.4 20-.6a2.2 2.2 0 0 1 1.7 4.1 36 36 0 0 1-14 3.2"/>
			<path id="Fill-17" d="M72 7.5c-7.6 0-11-3.5-11.2-3.7a2.2 2.2 0 0 1 3.3-3c.3.2 5.7 5.4 20-.6a2.2 2.2 0 0 1 1.7 4.1A36 36 0 0 1 72 7.5"/>
		  </g>
		</svg>
	</div>
	
	<div class="stars">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313 212" id="star"  fill="#223F47">
			<path d="M4 45a4 4 0 1 0 8 0 4 4 0 0 0-8 0M305 126a4 4 0 1 0 8 0 4 4 0 0 0-8 0M109.6 53a4 4 0 1 0 8 0 4 4 0 0 0-8 0M178.7 151.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M0 190.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M284.1 212c-.8 0-1.5-.7-1.5-1.6V201a1.5 1.5 0 1 1 3 0v9.4c0 .9-.7 1.5-1.5 1.5"/>
			<path d="M288.8 207.2h-9.4a1.5 1.5 0 0 1 0-3h9.4a1.5 1.5 0 1 1 0 3M186.2 9.7c-.4 0-.8-.2-1.1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.2-2.2l6.6 6.7a1.5 1.5 0 0 1-1 2.6"/>
			<path d="M179.5 9.7c-.4 0-.8-.2-1-.5-.6-.6-.6-1.5 0-2.1L185 .4a1.5 1.5 0 1 1 2.1 2.2l-6.6 6.6c-.3.3-.7.5-1.1.5M241.6 82.2c-.3 0-.7-.2-1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.1-2.2l6.7 6.7a1.5 1.5 0 0 1-1 2.6"/>
			<path d="M235 82.2a1.5 1.5 0 0 1-1-2.6l6.6-6.7a1.5 1.5 0 1 1 2.1 2.2l-6.7 6.6c-.2.3-.6.5-1 .5M48.6 147.9c-.8 0-1.5-.7-1.5-1.5v-9.5a1.5 1.5 0 1 1 3 0v9.5c0 .8-.7 1.5-1.5 1.5"/>
			<path d="M53.3 143.2h-9.4a1.5 1.5 0 1 1 0-3h9.4a1.5 1.5 0 1 1 0 3M127.5 137c0-5.9-4.7-10.6-10.6-10.6 5.9 0 10.6-4.8 10.6-10.6 0 5.8 4.8 10.6 10.6 10.6-5.8 0-10.6 4.7-10.6 10.5"/>
		</svg>
	</div>
	<div class="stars stars2">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313 212">
			<path d="M4 45a4 4 0 1 0 8 0 4 4 0 0 0-8 0M305 126a4 4 0 1 0 8 0 4 4 0 0 0-8 0M109.6 53a4 4 0 1 0 8 0 4 4 0 0 0-8 0M178.7 151.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M0 190.8a4 4 0 1 0 8 0 4 4 0 0 0-8 0M284.1 212c-.8 0-1.5-.7-1.5-1.6V201a1.5 1.5 0 1 1 3 0v9.4c0 .9-.7 1.5-1.5 1.5"/>
			<path d="M288.8 207.2h-9.4a1.5 1.5 0 0 1 0-3h9.4a1.5 1.5 0 1 1 0 3M186.2 9.7c-.4 0-.8-.2-1.1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.2-2.2l6.6 6.7a1.5 1.5 0 0 1-1 2.6"/>
			<path d="M179.5 9.7c-.4 0-.8-.2-1-.5-.6-.6-.6-1.5 0-2.1L185 .4a1.5 1.5 0 1 1 2.1 2.2l-6.6 6.6c-.3.3-.7.5-1.1.5M241.6 82.2c-.3 0-.7-.2-1-.5l-6.7-6.6a1.5 1.5 0 1 1 2.1-2.2l6.7 6.7a1.5 1.5 0 0 1-1 2.6"/>
			<path d="M235 82.2a1.5 1.5 0 0 1-1-2.6l6.6-6.7a1.5 1.5 0 1 1 2.1 2.2l-6.7 6.6c-.2.3-.6.5-1 .5M48.6 147.9c-.8 0-1.5-.7-1.5-1.5v-9.5a1.5 1.5 0 1 1 3 0v9.5c0 .8-.7 1.5-1.5 1.5"/>
			<path d="M53.3 143.2h-9.4a1.5 1.5 0 1 1 0-3h9.4a1.5 1.5 0 1 1 0 3M127.5 137c0-5.9-4.7-10.6-10.6-10.6 5.9 0 10.6-4.8 10.6-10.6 0 5.8 4.8 10.6 10.6 10.6-5.8 0-10.6 4.7-10.6 10.5"/>
		</svg>
	</div>
</div>

css

body {
  overflow: hidden;
}

#sky {
  --background: #26B8CE;
  height: 100vh;
  width: 100vw;
  transition: background 250ms ease;
  background: var(--background);
}

#moon, #sun {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
  z-index: 2;
}

#moon {
  --moveMoon: translate(200%, 200%);
  width: 33vw;
  height: 33vw;
  -webkit-transform: var(--moveMoon);
          transform: var(--moveMoon);
}

#sun {
  --move: translate(-50%, -50%);
  width: 50vw;
  height: 50vw;
  -webkit-transform: var(--move);
          transform: var(--move);
}
#sun #rays {
  -webkit-animation: rotateRays 7s linear infinite;
          animation: rotateRays 7s linear infinite;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}

@-webkit-keyframes rotateRays {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes rotateRays {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.cloud {
  --moveCloud: translate(0%, 0%);
  width: 20vw;
  top: 35vh;
  left: 20vw;
  position: absolute;
  -webkit-transform: var(--moveCloud);
          transform: var(--moveCloud);
  transition: 1.5s ease-in-out;
}
.cloud.cloud2 {
  top: 25vh;
  left: 60vw;
  -webkit-transform: var(--moveCloud);
          transform: var(--moveCloud);
}
.cloud.cloud3 {
  top: 65vh;
  left: 56vw;
  -webkit-transform: var(--moveCloud);
          transform: var(--moveCloud);
}

.stars {
  --visibility: 0;
  --delay: 0;
  width: 60vw;
  opacity: var(--visibility);
  transition: opacity 250ms 1s ease;
  transition-delay: var(--delay);
  position: absolute;
  top: 0;
  left: 0;
}
.stars.stars2 {
  opacity: var(--visibility);
  top: 0;
  left: 50%;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.stars path {
  fill: #223F47;
}

JavaScript

var sky = document.getElementById('sky');
var sun = document.getElementById('sun');
var moon = document.getElementById('moon');
var cloud = document.getElementsByClassName('cloud');
var stars = document.getElementsByClassName('stars');

if ( 'AmbientLightSensor' in window ) {
  const sensor = new AmbientLightSensor();
  sensor.onreading = () => {
	  
	  if ( sensor.illuminance < 50) {
		  	sky.style.setProperty('--background', '#152B33');
		    sun.style.setProperty('--move', 'translate(-200%, -200%)');
		    moon.style.setProperty('--moveMoon', 'translate(-50%, -50%)');
			cloud[0].style.setProperty('--moveCloud', 'translate(-200%, 0%)');
			cloud[1].style.setProperty('--moveCloud', 'translate(-450%, 0%)');
			cloud[2].style.setProperty('--moveCloud', 'translate(300%, 0%)');
		  	stars[0].style.setProperty('--visibility', '1');
		  	stars[0].style.setProperty('--delay', '1s');
		  	stars[1].style.setProperty('--visibility', '1');
		  	stars[1].style.setProperty('--delay', '1s');

} else {
		  	sky.style.setProperty('--background', '#26B8CE');
		  	sun.style.setProperty('--move', 'translate(-50%, -50%)');
		  	moon.style.setProperty('--moveMoon', 'translate(200%, 200%)');
			cloud[0].style.setProperty('--moveCloud', 'translate(0%, 0%)');
			cloud[1].style.setProperty('--moveCloud', 'translate(0%, 0%)');
			cloud[2].style.setProperty('--moveCloud', 'translate(0%, 0%)');
		  	stars[0].style.setProperty('--visibility', '0');
		  	stars[0].style.setProperty('--delay', '0');
		  	stars[1].style.setProperty('--visibility', '0');
		  	stars[1].style.setProperty('--delay', '0');

}
    console.log('Current light level:', sensor.illuminance);
  };
  sensor.onerror = (event) => {
    console.log(event.error.name, event.error.message);
  };
  sensor.start();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg