Dan kode lengkap Membuat efek gelombang pada teks menggunakan clip-path HTML dan CSS3 di bawah ini :
<html>
<head>
<title> Labkom99.com - Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3 </title>
<style>
* {
font-family: 'Microsoft Yahei', sans-serif;
}
.panel {
overflow: auto;
width: 100%;
height: 100vh;
position: relative;
background: radial-gradient(circle, #0e0e0e 15%, #010101);
}
.wow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 10vmin;
color: #fff;
line-height: .85;
text-transform: uppercase;
background-image: url(/uploads/161001/lighten2.jpg);
background-size: contain;
-webkit-text-fill-color: rgb(223 236 17 / 10%);
-webkit-background-clip: text;
z-index: 10;
}
.wow:before {
content: 'www.labkom99.com';
display: table;
margin-left: auto;
margin-right: auto;
font-size: 3.5vmin;
color: white;
-webkit-text-fill-color: white;
-webkit-background-clip: none;
background-color: #04671e;
padding: 3px;
}
.wow + .wow {
-webkit-text-fill-color: #045814;
z-index: 20;
animation: meh 3s ease-out infinite alternate;
}
@keyframes meh {
from {
clip-path: polygon(100% 0, 100% 100%, 20% 100%, 61% 91%, 94% 47%);
}
50% {
clip-path: polygon(100% 0, 100% 100%, 20% 100%, 59% 52%, 74% 13%);
}
to {
clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 85%, 87% 41%);
}
}
.jj span {
display: block;
}
body {
margin: 0;
}
</style>
<body>
<div class="panel">
<h1 class="wow">
<span>LABKOM99</span>
<span>BELAJAR HTML</span>
</h1>
<h1 class="wow">
<span>LABKOM99</span>
<span>BELAJAR HTML</span>
</h1>
</div>
</body>
</head>
</html>
Selamat Mencoba….!!!!!
Mantap bang izin copy bang thanks sangat membantu sekali
Terima kasih kembali sudah berkunjung…. Semoga bermanfaat