nuves, sol, lluvia, truenos, css3

tiempo meterologico en css3 lluvia, truenos, sol, nuves

by femfoyou

HTML

<div class="wrapper">
  <div class="sun"></div>
  <div class="cloud">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_s">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_vs">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="haze"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="thunder"></div>
  <div class="rain">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div class="sleet">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div class="text">
    <ul>
      <li>www.teenovative.com</li>
      <li>Teenovative Social Networks</li>
      <li>We Are Innovative Teens Cloudy</li>
      <li>Find Friends</li>
      <li>Make Friends</li>
      <li>Communicate</li>
      <li>Call & Text</li>
      <li>Mukesh Jha Productions</li>
    </ul>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway+Dots);

body{
  margin: 0;
  padding: 0;
  background: #33495f;
}

.wrapper{
  width: 150px;
  height: 150px;
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
}

.sun{
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 85px;
  height: 85px;
  background: #f9db62;
  border-radius: 360px;
  opacity: 1;
  animation: sun 10s 0s linear infinite;
}

.cloud{
  position: absolute;
  bottom: 12px;
  left: 8px;
  z-index: 2;
  opacity: 0;
  animation: cloud 10s 0s linear infinite;
}

.cloud .cloud1:not(.c_shadow) ul li{
  animation: cloudi 10s 0.1s linear infinite;
}

.cloud .cloud1:not(.c_shadow):before{
  animation: cloudi 10s 0s linear infinite;
}

.cloud_s{
  position: absolute;
  bottom: 70px;
  left: 150px;
  transform: scale(0.7,0.7) matrix(-1, 0, 0, 1, 0, 0);
  z-index: 1;
  opacity: 0;
  animation: cloud_s 10s 0s linear infinite;
}

.cloud_s .c_shadow{
  transform: scale(1.02,1.02);
}

.cloud_vs{
  position: absolute;
  bottom: 90px;
  left: 30px;
  transform: scale(0.5,0.5);
  z-index: 0;
  opacity: 0;
  animation: cloud_vs 10s 0s linear infinite;
}

.c_shadow{
  z-index: 4 !important;
  left: -5px;
  bottom: -3px !important;
}

.c_shadow:before{
  background: #33495f !important;
}

.c_shadow ul li{
  width: 60px !important;
  height: 60px !important;
  background: #33495f !important;
  float: left;
  position: absolute;
  bottom: -2px !important;
  border-radius: 360px;
}

.c_shadow ul li:nth-child(2){
  width: 80px !important;
  height: 80px !important;
  background: #33495f !important;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 16px !important;
  left: 25px !important;
}

.c_shadow ul li:nth-child(3){
  width: 70px !important;
  height: 70px !important;
  background: #33495f !important;
  float: left;
  border-radius: 360px;
  position: absolute;
  bottom: 6px !important;
  left: 60px !important;
}

.c_shadow ul li:last-child{
  width: 60px...