Bagaimana gambar profil blog ini dihasilkan

Guna CSS. Dua huruf yg font-size: 200px; dimasukan ke div yg width: 200px;. Siap.

OrandableG=→OG←

Demo

©

OG

HTML view ▼

<div class="wrapperle">
    <div id="kontena"><span style="font-size: large;">©</span>
      <p class="gprofil">OG</p>
      <div class="titis"></div>
    </div>
  </div>
<style>
* {
  padding: 0;
  margin: 0;  
}
.wrapperle {
  width: 100%;
  height: 42vh;
  overflow: hidden;
  background-color: #0e8ebc;
}
#kontena {
  height: 200px;
  width: 200px;
  margin: 70px auto;
  position: relative;
  
}
#kontena .gprofil {
  position: absolute;
  color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  font-size: 200px;
  z-index: 999;
  animation: mbesar 6s;
}
#kontena .titis {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(120%, -800%) scaleX(0.5);
  animation: grk 6s cubic-bezier(1, 0.04, 0.74, 0.2);
}
@keyframes mbesar {
  0% {
   font-size: 68px; 
  }
  15% {
   font-size: 20px; 
  }
  30% {
    font-size: 68px; 
  }
  31% {
    font-size: 60px;
  }
  53% {
    font-size: 200px;
  }
}
@keyframes grk {
  0% {
    transform: translate(120%, -800%) scaleX(0.2);
    height: 60px;
  }
  30% {
    transform: translate(120%, -200%);
    height: 30px;
  }
  70% {
    transform: translate(120%, 100%);
    height: 30px;
  }
  100% {
    transform: translate(120%, 800%) scaleX(0.2);
    height: 60px;
  }
}
</style>

Tutup

Hakcipta terpelihara. Reka bentuk gambar alias logo ini tercipta pada 21:44 08/04/2022.