3d water drops only html

आप सभी जानते ही होंगे कि 3D water drop देखने में बहुत अच्छा लगता है और हम सोचे रहे होंगे कि यह कैसे बनाया जाता है तो आज हम आपको कुछ html और

Css कोड देने वाले हैं जिसे आप कॉपी करके आप जहां भी उसको यूज करना चाहते हैं वहां पर आपको इस कोड को पेस्ट कर देना है अगर यह कोड अच्छा लगा तो आप इसे शेयर कर दीजिएगा 

<div class="drops">
  <div class="drop"></div>
  <div class="drop"></div>
   <div class="drop"></div>

</div>
<style type="text/css">body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dedede;
}

.drops {
  position: reative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop {
  position: absolute;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 57% 43% 37% 63% / 45% 52% 48% 52%;
  box-shadow: inset 10px 10px 10px rgba(0,0,0,0.05), 15px 25px 10px rgba(0,0,0,0.1), 15px 20px 20px rgba(0,0,0,0.05), inset -10px -10px 15px rgba(255,255,255,0.9);
}

.drop:before {
  content: '';
  position: absolute;
  left: 25px;
  top: 35px;
  width: 20px;
  height: 20px;
  border-radius: 42% 58% 37% 63% / 40% 43% 57% 60% ;
  background: #FFF
}

.drop:after {
  content: '';
  position: absolute;
  left: 60px;
  top: 25px;
  width: 10px;
  height: 10px;
  border-radius: 42% 58% 37% 63% / 40% 43% 57% 60% ;
  background: #FFF
}

.drop:nth-child(2) {
  transform: scale(0.5) translate(-200px, 180px);
  border-radius: 45% 55% 64% 36% / 34% 33% 67% 66% 
}

.drop:nth-child(3) {
  transform: scale(0.5) translate(280px, 10px);
  border-radius: 40% 60% 65% 35% / 36% 26% 74% 64% 
}</style>

Thanks for visit our site

Read Also :

• 3d water drops only html
• Timer download free animated script blogger
• How to Add Google Translate to Pages and Posts

Go to Link