| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Water</title>
|
| </head>
|
| <body>
|
|
|
| <div class="content">
|
| <h2>Water</h2>
|
| <h2>Water</h2>
|
| </div>
|
|
|
| </body>
|
| </html>
|
|
|
|
|
| <style type="text/css">
|
| *{
|
| margin: 0px;
|
| padding: 0px;
|
| font-family: arial;
|
| box-sizing: border-box;
|
| }
|
|
|
| body{
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| min-height: 100vh;
|
| background: #000;
|
| }
|
| .content{
|
| position: relative;
|
| }
|
| .content h2{
|
| position: absolute;
|
|
|
| transform: translate(-50%, -50%);
|
| font-size: 8em;
|
|
|
| }
|
| .content h2:nth-child(1){
|
| color: transparent;
|
| -webkit-text-stroke : 2px #03a9f4;
|
| }
|
| .content h2:nth-child(2){
|
| color: #03a9f4;
|
| -webkit-text-stroke : 2px #03a9f4;
|
| animation: animate 4s ease-in-out infinite;
|
| }
|
|
|
| @keyframes animate{
|
| 0%,100%
|
| {
|
| clip-path: polygon(0% 39%, 13% 39%, 25% 40%, 34% 41%, 46% 45%, 58% 48%, 65% 52%, 72% 56%, 83% 59%, 88% 59%, 96% 59%, 100% 61%, 100% 91%, 100% 99%, 61% 100%, 0% 99%);
|
| }
|
|
|
| 50%
|
| {
|
| clip-path: polygon(0% 48%, 14% 46%, 22% 40%, 32% 46%, 44% 51%, 56% 48%, 65% 41%, 79% 41%, 89% 42%, 100% 45%, 100% 99%, 1% 99%);
|
| }
|
| }
|
| </style>
|
|
|
Comments
Post a Comment