zurück
HTML:
copy HTML
<div class='main'> <h2 class="first">Wasserspaß</h2> <h2 class="second">Wasserspaß</h2> </div>
CSS:
copy CSS
body { margin: 0; display: flex; justify-content:center; align-items: center; height: 100vh; background-color: black; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } .main { position: relative; } h2 { /* color: white; */ font-size:250px; position:absolute; transform: translate(-50%, -50%); margin: 0; } .first { color: transparent; -webkit-text-stroke: 2px #05a8f3; } .second { color: #05a8f3; -webkit-text-stroke: 2px #05a8f3; animation: waves 4s ease-in-out infinite; } @keyframes waves { 0%, 100% { clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100% ); } 50% { clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100% ); } }
JavaScript:
copy JS
