Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Gooey Menu
Using CSS and SVG Filters
@import "compass/css3"; body { background: #3f51b5; color: white; text-align: center; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; margin-bottom: 10px; margin-top: 10px; } h1 { font-size: 3em; } .menu { filter: url('#shadowed-goo'); } .menu-item, .menu-open-button { background: #ff4081; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; top: 20px; color: white; text-align: center; line-height: 80px; transform: translate3d(0, 0, 0); transition: transform ease-out 200ms; } .menu-open { display: none; } .hamburger { width: 25px; height: 3px; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -12.5px; margin-top: -1.5px; transition: transform 200ms; } .hamburger-1 { transform: translate3d(0, -8px, 0); } .hamburger-2 { transform: translate3d(0, 0, 0); } .hamburger-3 { transform: translate3d(0, 8px, 0); } .menu-open:checked + .menu-open-button .hamburger-1 { transform: translate3d(0, 0, 0) rotate(45deg); } .menu-open:checked + .menu-open-button .hamburger-2 { transform: translate3d(0, 0, 0) scale(0.1, 1); } .menu-open:checked + .menu-open-button .hamburger-3 { transform: translate3d(0, 0, 0) rotate(-45deg); } .menu { position: absolute; left: 50%; margin-left: -190px; padding-top: 20px; padding-left: 190px; width: 380px; height: 250px; box-sizing: border-box; font-size: 20px; text-align: left; } .menu-item:hover { background: white; color: #ff4081; } .menu-item:nth-child(3) { transition-duration: 70ms; } .menu-item:nth-child(4) { transition-duration: 130ms; } .menu-item:nth-child(5) { transition-duration: 190ms; } .menu-item:nth-child(6) { transition-duration: 250ms; } .menu-item:nth-child(7) { transition-duration: 310ms; } .menu-open-button { z-index: 2; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; } .menu-open-button:hover { transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 200ms; transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-open:checked ~ .menu-item { transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 160ms; transform: translate3d(cos(0.1)*115px, sin(0.1)*115px, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 240ms; transform: translate3d(cos(0.835)*115px, sin(0.835)*115px, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 320ms; transform: translate3d(cos(1.57)*115px, sin(1.57)*115px, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 400ms; transform: translate3d(cos(2.305)*115px, sin(2.305)*115px, 0); } .menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 480ms; transform: translate3d(cos(3.04)*115px, sin(3.04)*115px, 0); }