A Pen by Viktor

Thumbnail
This awesome code was written by vigtor, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vigtor ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Viktor</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="raincloud" ng-show="cloud">
                <span class='shadow'></span>
                <div id="raindrop"></div>
                <div id="raindrop2"></div>
                <div id="raindrop3"></div>
                <div id="raindrop4"></div>
                <div id="raindrop5"></div
  </div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/vigtor/a-pen-by-viktor-zBYJEw */
#raincloud {
    width: 140px; height: 48px;
    margin:auto;
    z-index:10;
    position: relative;
    background: #f2f9fe;
    background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
    background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
    background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
    background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
    background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);

    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;


    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}

#raincloud:after, #raincloud:before {
    content: '';
    position: absolute;
    z-index: -1;

    background: #f2f9fe;

}

#raincloud:after {
    width: 50px; height: 50px;
    top: -30px; left: 70px;

    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}

#raincloud:before {
    width: 80px; height: 80px;
    top: -40px; right: 35px;

    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
}

.shadow {
    width: 70px;
    position: absolute;
    bottom: -10px;
    background: #000;
    z-index: -1;

    box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
}

#raindrop {
    background:#024b99;
    box-shadow: inset 1px -3px 4px -2px #c9e3f0;

    width:16px;
    height:16px;
    position:relative;
    left:30px;
    top:60px;
    border-radius:30px;

    animation: rain 1s both ease-in; z-index: 8888;
    animation-iteration-count:infinite;
}

#raindrop:before {
    content:'';
    position:absolute;
    left:1px;
    top:-10px;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #024b99;
    border-left: 7px solid transparent;
    border-top: 0;
}

#raindrop2 {
    background:#024b99;
    box-shadow: inset 1px -3px 4px -2px #c9e3f0;

    width:16px;
    height:16px;
    position:relative;
    left:45px;
    top:60px;
    border-radius:30px;

    animation: rain 1s both ease-in; z-index: 8888;
    animation-iteration-count:infinite;
    animation-delay: 0.5s;
}

#raindrop2:before {
    content:'';
    position:absolute;
    left:1px;
    top:-10px;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #024b99;
    border-left: 7px solid transparent;
    border-top: 0;
}

#raindrop3 {
    background:#024b99;
    box-shadow: inset 1px -3px 4px -2px #c9e3f0;

    width:16px;
    height:16px;
    position:relative;
    left:65px;
    top:60px;
    border-radius:30px;
    animation: rain 1s both ease-in; z-index: 8888;
    animation-iteration-count:infinite;
    animation-delay: 1.1s;
}

#raindrop3:before {
    content:'';
    position:absolute;
    left:1px;
    top:-10px;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #024b99;
    border-left: 7px solid transparent;
    border-top: 0;
}

#raindrop4 {
    background:#024b99;
    box-shadow: inset 1px -3px 4px -2px #c9e3f0;

    width:16px;
    height:16px;
    position:relative;
    left:85px;
    top:60px;
    border-radius:30px;
    animation: rain 1s both ease-in; z-index: 8888;
    animation-iteration-count:infinite;
    animation-delay: 0.9s;
}

#raindrop4:before {
    content:'';
    position:absolute;
    left:1px;
    top:-10px;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #024b99;
    border-left: 7px solid transparent;
    border-top: 0;
}

#raindrop5 {
    background:#024b99;
    box-shadow: inset 1px -3px 4px -2px #c9e3f0;
    display:block;
    width:16px;
    height:16px;
    position:relative;
    left:105px;
    top:10px;
    border-radius:30px;
    animation: rain 1s both ease-in; z-index: 8888;
    animation-iteration-count:infinite;
    animation-delay: 0.25s;
}

#raindrop5:before {
    content:'';
    position:absolute;
    left:1px;
    top:-10px;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #024b99;
    border-left: 7px solid transparent;
    border-top: 0;
}

@keyframes rain {
    from    { transform:translateY(0px); }
    to      { transform: translateY(100px); }
}

Comments