ocean graphics

code

code

code

<p><a class="link" href="#"><span data-content="link 1">link 1</span></a>
  
                            <a class="link" href="#"><span class="dashed" data-content="link 2">link 2</span></a>
                            
                            <a class="link" href="#"><span class="wavy" data-content="link 3">link 3</span></a>
                        
                        
                    
                        <style>
                            box-sizing: border-box;
                            }
                            *::before, *::after {
                            box-sizing: border-box;
                            }
                            @media (min-width: 48rem) {
                            }
                            #container {
                            margin: auto;
                            padding: 0 1rem;
                            max-width: 48rem;
                            width: 100%;
                            }
                            a {
                            text-decoration: none;
                            color: black;
                            cursor: pointer;
                            }
                            .link {
                            position: relative;
                            transition: clip-path 275ms ease;
                            }
                            .link:hover span::before, .link:focus span::before {
                            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
                            }
                            .link span {
                            position: relative;
                            display: inline-block;
                            }
                            .link span::before {
                            position: absolute;
                            content: attr(data-content);
                            text-decoration: underline;
                            clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
                            transition: clip-path 275ms ease;
                            }
                            span.dashed::before {
                            text-decoration-style: dashed;
                            }
                            span.wavy::before {
                            text-decoration-style: wavy;
                            }
                            </style>

code

code

code

<Style>.bouncyyy { font-size:4em; z-index: 99; animation: bounce 2s infinite; animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto; ;}

.letterone { animation-delay:0s; display:inline-block;}
                            .lettertwo { animation-delay:0.2s; display:inline-block;}
                            .letterthree { animation-delay:0.4s; display:inline-block; }
                            .letterfour { animation-delay:0.6s; display:inline-block;}
                            .letterfive { animation-delay:0.8s; display:inline-block;}
                            .lettersix { animation-delay:1s; display:inline-block;}
                            .letterseven { animation-delay:1.2s; display:inline-block;}
                            
                            @keyframes bounce { 0% { transform: scale(1,1) translateY(0); } 10% { transform: scale(1.1,.9) translateY(0); } 30% { transform: scale(.9,1.1) translateY(-30px); } 50% { transform: scale(1.05,.95) translateY(0); } 60% { transform: scale(1,1) translateY(-4px); } 100% { transform: scale(1,1) translateY(0); } }</style>
                            
                            <p class="bouncyyy letterone">A</p><p class="bouncyyy lettertwo">L</p><p class="bouncyyy letterthree">L</p><p class="bouncyyy letterfour">I</p><p class="bouncyyy letterfive">S</p><p class="bouncyyy lettersix">O</p><p class="bouncyyy letterseven">N</p>

code

code