Water Wave Div
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Wave Waters</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="box"> | |
| <div class="content"> | |
| <h2>Water Wave Div</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | |
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <svg> | |
| <filter id="wavy"> | |
| <feTurbulence x="0" y="0" baseFrequency = "0.02" numOctaves="5" seed="2"> | |
| <animate attributeName= "baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"/> | |
| </feTurbulence> | |
| <feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap> | |
| </filter> | |
| </svg> | |
| </body> | |
| </html> | |
| <style type="text/css"> | |
| body{ | |
| margin: 0px; | |
| padding: 0px; | |
| box-sizing: border-box; | |
| font-family: sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: #000; | |
| } | |
| .container{ | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .container .box{ | |
| position: relative; | |
| width: 300px; | |
| height: 400px; | |
| color: #fff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| -webkit-box-reflect: below 15px linear-gradient (transparent,transparent,rgba(0,0,0,0.2)); | |
| } | |
| .container .box .content{ | |
| position: absolute; | |
| padding: 20px; | |
| text-align: center; | |
| transition: 0.5s; | |
| } | |
| .container .box:before{ | |
| content: ''; | |
| position: absolute; | |
| top: -10px; | |
| left: 10px; | |
| width: 100%; | |
| height: 100%; | |
| border:4px solid #fff; | |
| background: #000; | |
| filter: url(#wavy); | |
| } | |
| .container .box:hover:before{ | |
| background-color: #fff; | |
| transition: 0.5s; | |
| } | |
| .container .box:hover{ | |
| color: #000; | |
| } | |
| .container .box:after{ | |
| content: ''; | |
| position: absolute; | |
| top: -10px; | |
| left: 10px; | |
| width: 50%; | |
| height: 100%; | |
| border:4px solid #fff; | |
| border-right: none; | |
| filter: url(#wavy); | |
| background:rgba(255, 255, 255, 0.1); | |
| } | |
| svg{ | |
| width: 0px; | |
| height: 0px; | |
| } | |
| </style> |
Comments
Post a Comment