wind speed animation

body{
	width: 100%;
	display: block;
	overflow-x: hidden;
	background: #fff;
	font-family: 'Poppins', sans-serif;
}
.switch-wrap {
	position: relative;
	font-size: 17px;
	color: #212121;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	margin: 0 auto;
	margin-top: 30px;
	-webkit-transition: all 500ms linear;
	transition: all 500ms linear; 
}
.switch-wrap span {
	font-size: 14px;
	color: #000;
	font-weight: 500;
	letter-spacing: 0;
}
#switch,
#circle {
	height: 31px;
	cursor: pointer;
	border: 2px solid #000;
	-webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
		transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
} 
#switch {
	width: 60px;
	margin: 0 auto;
	border-radius: 27px;
	position: relative;
	display: block;
	text-align: center;
	margin: 0 auto;
    transform: translateY(10px);
}
#circle {
	margin-top: 5%;
	margin-left: 5%;
	width: 40%;
	height: 80%;
	border-radius: 50%;
	box-shadow: inset 4px -1px 0 0 #f1c40f;
}
.switched {
	border-color: #000 !important;
}
.switched #circle {
	margin-left: 55%;
	box-shadow: inset 4px -1px 0 0 #2ecc71;
}
.main-wrapper{
	position: relative;
	margin: 0 auto;
	text-align: center;
	width: 100% 2;
	height: 300px;
	overflow: hidden;
	display: block;
	border: 2px solid #000;
	z-index: 5;
	margin-top: 30px;
  margin-bottom: 60px;
	background: #fff;
}
.sun {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #000;
	top: 50px;
	left: 270px;
	z-index: 1;
	animation: rotate 10s linear infinite; 
}
@keyframes rotate {
  0% { 
		transform: rotate(0deg);  
  }
  100% { 
		transform: rotate(-360deg);   
  }
}
.sun span {
	position: absolute;
	width: 2px;
	height: 14px;
	background-color: #000;
	top: -18px;
	left: 7px;
	z-index: 1;
	transform-origin: center bottom;
    transform: scaleY(1);
	animation: sun-ray-1 1s linear infinite;
	box-shadow: 4px 4px 0 0 #f1c40f;
}
@keyframes sun-ray-1 {
  0%,100% { 
		transform: scaleY(1); 
  }
  50% { 
		transform: scaleY(0.6); 
  }
}
.sun span:nth-child(2) {
    transform: rotate(45deg) scaleY(0.6);
	top: -15px;
	left: 16px;
	animation: sun-ray-2 1s linear infinite;
}
@keyframes sun-ray-2 {
  0%,100% { 
    transform: rotate(45deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(45deg) scaleY(1);
  }
}
.sun span:nth-child(3) {
    transform: rotate(90deg) scaleY(1);
	top: -5px;
	left: 20px;
	animation: sun-ray-3 1s linear infinite;
}
@keyframes sun-ray-3 {
  0%,100% { 
    transform: rotate(90deg) scaleY(1);
  }
  50% { 
    transform: rotate(90deg) scaleY(0.6);
  }
}
.sun span:nth-child(4) {
    transform: rotate(135deg) scaleY(0.6);
	top: 3px;
	left: 15px;
	animation: sun-ray-4 1s linear infinite;
}
@keyframes sun-ray-4 {
  0%,100% { 
    transform: rotate(135deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(135deg) scaleY(1);
  }
}
.sun span:nth-child(5) {
    transform: rotate(180deg) scaleY(1);
	top: 6px;
	left: 7px;
	animation: sun-ray-5 1s linear infinite;
}
@keyframes sun-ray-5 {
  0%,100% { 
    transform: rotate(180deg) scaleY(1);
  }
  50% { 
    transform: rotate(180deg) scaleY(0.6);
  }
}
.sun span:nth-child(6) {
    transform: rotate(225deg) scaleY(0.6);
	top: 3px;
	left: -2px;
	animation: sun-ray-6 1s linear infinite;
}
@keyframes sun-ray-6 {
  0%,100% { 
    transform: rotate(225deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(225deg) scaleY(1);
  }
}
.sun span:nth-child(7) {
    transform: rotate(270deg) scaleY(1);
	top: -5px;
	left: -5px;
	animation: sun-ray-7 1s linear infinite;
}
@keyframes sun-ray-7 {
  0%,100% { 
    transform: rotate(270deg) scaleY(1);
  }
  50% { 
    transform: rotate(270deg) scaleY(0.6);
  }
}
.sun span:nth-child(8) {
    transform: rotate(315deg) scaleY(0.6);
	top: -14px;
	left: -2px;
	animation: sun-ray-8 1s linear infinite;
}
@keyframes sun-ray-8 {
  0%,100% { 
    transform: rotate(315deg) scaleY(0.6);
  }
  50% { 
    transform: rotate(315deg) scaleY(1);
  }
}
.mountain-1{
    position: absolute;
	border: 2px solid #000;
	width: 14px;
	height: 14px;
	bottom: 37px;
	left: 80px;
	z-index: 1;
    transform: rotate(-45deg);
}
.mountain-1:before{
    position: absolute;
	content: '';
	width: 70px;
	height: 2px;
	background-color: #000;
	top: -2px;
	left: -72px;
}
.mountain-1:after{
    position: absolute;
	content: '';
	height: 14px;
	width: 2px;
	background-color: #000;
	top: 10px;
	left: 10px;
	box-shadow: 4px -4px 0 0 #94c6e7;
}
.mountain-2{
    position: absolute;
	border: 2px solid #000;
	width: 18px;
	height: 18px;
	bottom: 47px;
	left: 130px;
	z-index: 1;
    transform: rotate(-45deg);
}
.mountain-2:before{
    position: absolute;
	content: '';
	width: 40px;
	height: 2px;
	background-color: #000;
	top: -2px;
	left: -42px;
}
.mountain-2:after{
    position: absolute;
	content: '';
	height: 16px;
	width: 2px;
	background-color: #000;
	top: 14px;
	left: 14px;
	box-shadow: 4px -4px 0 0 #94c6e7;
}
.mountain-3{
    position: absolute;
	border: 2px solid #000;
	width: 20px;
	height: 20px;
	bottom: 70px;
	left: 198px;
	z-index: 1;
    transform: rotate(-45deg);
}
.mountain-3:before{
    position: absolute;
	content: '';
	width: 70px;
	height: 2px;
	background-color: #000;
	top: -2px;
	left: -72px;
}
.mountain-3:after{
    position: absolute;
	content: '';
	height: 30px;
	width: 2px;
	background-color: #000;
	top: 16px;
	left: 16px;
	box-shadow: 4px -12px 0 0 #94c6e7;
}
.mountain-4{
    position: absolute;
	width: 0;
	height: 0;
	bottom: 76px;
	left: 245px;
	z-index: 1;
    transform: rotate(-45deg);
}
.mountain-4:before{
    position: absolute;
	content: '';
	width: 15px;
	height: 2px;
	background-color: #000;
	top: 0;
	left: -15px;
}
.mountain-4:after{
    position: absolute;
	content: '';
	height: 60px;
	width: 2px;
	background-color: #000;
	top: 0;
	left: 0;
	box-shadow: -5px 6px 0 0 #94c6e7;
}
.mountain-5{
    position: absolute;
	border: 2px solid #000;
	width: 14px;
	height: 14px;
	bottom: 50px;
	left: 290px;
	z-index: 1;
    transform: rotate(-45deg);
}
.mountain-5:before{
    position: absolute;
	content: '';
	width: 15px;
	height: 2px;
	background-color: #000;
	top: -2px;
	left: -17px;
}
.mountain-5:after{
    position: absolute;
	content: '';
	height: 84px;
	width: 2px;
	background-color: #000;
	top: 10px;
	left: 10px;
	box-shadow: -5px 6px 0 0 #94c6e7;
}
.windmill-pole-wrap{
    position: absolute;
	bottom: -3px;
	left: 130px;
	perspective: 70px;
	z-index: 50;
}
.windmill-pole-wrap.back-left{
	left: 50px;
	z-index: 1;
	transform: scale(0.7);
	transform-origin: center bottom;
}
.windmill-pole-wrap.right{
	left: auto;
	right: 85px;
	transform: scale(0.85);
	transform-origin: center bottom;
}
.windmill-pole{
    position: absolute;
	bottom: 0;
	border: 3px solid #000;
	width: 14px;
	height: 220px;
	left: -7px;
	background-color: #fff;
	transform: rotateX(15deg);
	transform-origin: center bottom;
}
.windmill-pole-ellipses{
    position: absolute;
	bottom: 114px;
	left: 130px;
	z-index: 51;
}
.windmill-pole-ellipses.back-left{
	left: 50px;
	bottom: 80px;
	z-index: 3;
	transform: scale(0.7);
	transform-origin: center bottom;
}
.windmill-pole-ellipses.right{
	left: auto;
	right: 85px;
	bottom: 100px;
	transform: scale(0.85);
	transform-origin: center bottom;
}
.windmill-pole-ellipses-wrapper{
    position: absolute;
	top: 0;
	left: 0;
	animation: rotate-ellipses 6s linear infinite;    
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.windmill-pole-ellipses-wrap{
    position: absolute;
	top: 0;
	left: 0;
	animation: rotate-ellipses 2s linear infinite;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
.windmill-pole-ellipses-center{
    position: absolute;
	top: -7px;
	left: -7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #fff;
	border: 2px solid #000;
	z-index: 2;
}
.ellipses {
    position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.ellipses span{
    position: absolute;
	top: -70px;
	left: -5px;
	width: 10px;
	height: 70px;
	border-radius: 100%;
	background-color: #fff;
	border: 2px solid #000;
	transform-origin: center bottom;
}
.ellipses span:nth-child(2){
    transform: rotate(120deg);
}
.ellipses span:nth-child(3){
    transform: rotate(240deg);
}
.ellipses.delayed span{
    transform: rotate(60deg);
}
.ellipses.delayed span:nth-child(2){
    transform: rotate(180deg);
}
.ellipses.delayed span:nth-child(3){
    transform: rotate(300deg);
}
body.slow-wind .windmill-pole-ellipses-wrapper{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
body.slow-wind .windmill-pole-ellipses-wrap{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
@keyframes rotate-ellipses {
  0% { 
		transform: rotate(0deg);  
  }
  100% { 
		transform: rotate(-360deg);   
  }
}
.clouds-wind-wrapper{
    position: absolute;
	top: 0;
	left: 0;
	width: 1200px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	z-index: 5;
	animation: moveClouds 4s linear infinite;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
.clouds-wind-wrap{
    position: absolute;
	top: 0;
	left: 0;
	width: 1200px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	animation: moveClouds 12s linear infinite;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
@keyframes moveClouds {
  0% { 
		transform: translateX(0);  
  }
  100% { 
		transform: translateX(-33.333333333333%);  
  }
}
body.slow-wind .clouds-wind-wrapper{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused; 
}
body.slow-wind .clouds-wind-wrap{
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
.clouds-wind-section{
    position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.clouds-wind-section.snd{
	left: 400px;
}
.clouds-wind-section.trd{
	left: 800px;
}
.cloud{
    position: absolute;
	top: 50px;
	left: 50px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.cloud span{
    position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	border-color: transparent transparent #000 #000;
	background-color: #fff;
	transform: rotate(45deg);
	z-index: 7;
}
.cloud span:nth-child(2){
	top: -9px;
	left: 10px;
	width: 22px;
	height: 22px;
	border-color: transparent transparent transparent #000;
	z-index: 6;
}
.cloud span:nth-child(3){
	top: -22px;
	left: 20px;
	width: 30px;
	height: 30px;
	border-color: #000 transparent transparent #000;
	box-shadow: 2px -3px 0 0 #3498db;
	z-index: 3;
}
.cloud span:nth-child(4){
	top: 5px;
	left: 10px;
	width: 40px;
	height: 15px;
	border-radius: 0;
	border: none;
	border-bottom: 2px solid #000;
	transform: rotate(0);
	z-index: 6;
}
.cloud span:nth-child(5){
	top: -7px;
	left: 35px;
	width: 27px;
	height: 27px;
	border-color: #000 #000 transparent transparent;
	box-shadow: 2px -3px 0 0 #3498db;
	z-index: 4;
}
.cloud.snd{
	top: 100px;
	left: 300px;
}
.cloud.trd{
	top: 150px;
	left: 220px;
	transform: rotateY(180deg);
	transform-origin: center center;
}
.cloud.trd span{
	box-shadow: -3px 2px 0 0 #3498db;
}
.cloud.trd span:nth-child(4){
	box-shadow: none;
}
.cloud.trd span:nth-child(5){
	box-shadow: none;
}
.wind{
    position: absolute;
	top: 90px;
	left: 50px;
}
.wind span{
    position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	transform: rotate(45deg);
	border-color: transparent transparent #000 #000;
}
.wind span:before{
    position: absolute;
	content: '';
	bottom: 15px;
	right: -38px;
	width: 45px;
	height: 2px;
	background-color: #000;
	transform: rotate(-45deg);
	box-shadow: 4px 4px 0 0 #3498db;
}
.wind span:after{
    position: absolute;
	content: '';
	bottom: 40px;
	right: -48px;
	width: 14px;
	height: 2px;
	background-color: #000;
	transform: rotate(-45deg);
	box-shadow: 4px 4px 0 0 #3498db;
}
.wind span:nth-child(2){
	top: 3px;
	left: -16px;
	width: 12px;
	height: 12px;
}
.wind span:nth-child(2):after{
	width: 50px;
	bottom: 58px;
	right: -83px;
}
.wind span:nth-child(3){
	top: 18px;
	left: 12px;
	width: 40px;
	height: 2px;
	border: none;
	border-radius: 0;
	background-color: #000;
	transform: rotate(0);
}
.wind span:nth-child(3):before{
	width: 10px;
	bottom: auto;
	top: 0;
	left: 50px;
	right: auto;
	transform: rotate(0);
}
.wind span:nth-child(3):after{
	width: 30px;
	bottom: auto;
	top: 0;
	left: 70px;
	right: auto;
	transform: rotate(0);
}
.wind span:nth-child(4){
	top: 23px;
	left: 24px;
	width: 10px;
	height: 2px;
	border: none;
	border-radius: 0;
	background-color: #000;
	transform: rotate(0);
}
.wind span:nth-child(4):before{
	width: 40px;
	bottom: auto;
	top: 0;
	left: 20px;
	right: auto;
	transform: rotate(0);
}
.wind span:nth-child(4):after{
	width: 10px;
	bottom: auto;
	top: 0;
	left: 70px;
	right: auto;
	transform: rotate(0);
}
.wind.snd{
	top: 140px;
	left: 260px;
	transform: scale(0.9);
}
.wind-small{
    position: absolute;
	top: 0;
	left: 0;
}
.wind-small span{
    position: absolute;
	top: 170px;
	left: 32px;
	height: 2px;
	width: 8px;
	background-color: #000;
	box-shadow: 4px 4px 0 0 #3498db;
}
.wind-small span:nth-child(2){
	top: 150px;
	left: 52px;
	width: 16px;
}
.wind-small span:nth-child(2):after{
	left: 26px;
	width: 6px;
	height: 2px;
	background-color: #000;
    position: absolute;
	content: '';
	top: 0;
	box-shadow: 4px 4px 0 0 #3498db;
}
.wind-small span:nth-child(3){
	top: 187px;
	left: 102px;
	width: 16px;
}
.wind-small span:nth-child(4){
	top: 180px;
	left: 362px;
	width: 10px;
}
.wind-small span:nth-child(5){
	top: 40px;
	left: 332px;
	width: 20px;
}
.wind-small span:nth-child(5):after{
	left: 30px;
	width: 7px;
	height: 2px;
	background-color: #000;
    position: absolute;
	content: '';
	top: 0;
	box-shadow: 4px 4px 0 0 #3498db;
}
.wind-small span:nth-child(6){
	top: 30px;
	left: 122px;
	width: 16px;
}
.wind-small span:nth-child(7){
	top: 70px;
	left: 172px;
	width: 12px;
}
.wind-small span:nth-child(8){
	top: 50px;
	left: 188px;
	width: 8px;
}
.wind-small span:nth-child(8):after{
	left: 18px;
	width: 3px;
	height: 2px;
	background-color: #000;
    position: absolute;
	content: '';
	top: 0;
	box-shadow: 4px 4px 0 0 #3498db;
}

.tree{
    position: absolute;
	bottom: 0;
	left: 180px;
	z-index: 3;
	transform-origin: center bottom;
	animation: moveTree 1s linear infinite;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
.tree-wrap{
    position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	transform-origin: center bottom;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
@keyframes moveTree {
  0%,100% { 
		transform: skewX(16deg);  
  }
  20% { 
		transform: skewX(18deg); 
  }
  40% { 
		transform: skewX(20deg); 
  }
  60% { 
		transform: skewX(17deg); 
  }
  80% { 
		transform: skewX(18deg); 
  }
}
body.slow-wind .tree-wrap{
	transform: skewX(-10deg); 
}
body.slow-wind .tree{
	animation-duration: 1.8s;
}
.tree span{
    position: absolute;
	bottom: 0;
	left: 0;
	width: 2px;
	height: 8px;
	background-color: #000;
	z-index: 3;
	transform: scale(1.1); 
}
.tree span:after{
    position: absolute;
	content: '';
	bottom: 100%;
	left: 50%;
	margin-left: -8px;
	width: 16px;
	height: 26px;
	background-color: #fff;
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	border-color: #000 #000 #000 #000;
}
.tree span:before{
    position: absolute;
	content: '';
	bottom: calc(100% + 4px);
	left: 50%;
	margin-left: -4px;
	width: 16px;
	height: 26px;
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	border-color: transparent #2ecc71 transparent transparent;
	transform: rotate(-15deg);
}
.tree span:nth-child(2){
	left: 30px;
}
.tree span:nth-child(3){
	left: 160px;
}
.tree span:nth-child(4){
	left: -107px;
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: 30px 30px;
  background-repeat: no-repeat;
  background-color: #212121;
    background-image: url('');
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(0,0,0,.1);
}
</style>
  	
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

}
	});</script>
</body>

wind speed animation

Post a Comment

Social Plugin

Popular Posts

Script Template MediumUi

Calculate Pixels To Viewport Height

Factorial Calculator

Unix Timestamp Converter

Labels

Knowledge

Comments

𝐌ąɖɛ ῳıɬɧ Ɩơ۷ɛ ɮʏ

Learning Services

Best Tools Service

Footer Copyright

#buttons=(Accept !) #days=(20)

Contact form

wind speed animation

You may like these posts

Post a Comment

Footer Copyright

#buttons=(Accept !) #days=(20)

Contact form