Onaylı Üye
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>MH</title>
</head>
<body>
<div class="content">
<h2>MH</h2>
<h2>MH</h2>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.content{
position: relative;
}
.content h2{
position: absolute;
color: #fff;
transform: translate(-50%, -50%);
font-size: 8em;
}
.content h2:nth-child(1){
color: transparent;
-webkit-text-stroke: 2px #d6084d;
}
.content h2:nth-child(2){
color: #d6084d;
animation: animate 4s ease-in-out infinite;
}
@keyframes animate{
0%,100%{
clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
}
50%{
clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
}
}
Son düzenleme:
