Guna CSS. Dua huruf yg
font-size: 200px; dimasukan ke div yg
width: 200px;. Siap.
OrandableG=→OG←
Demo
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>
Hakcipta terpelihara. Reka bentuk gambar alias logo ini tercipta pada 21:44 08/04/2022.
Ulasan