LavaLamp effect with CSS

Developer
Twikito
Size
2,720 Kb
Views
34,408
  1. LavaLamp effect with CSS Previews
  2. LavaLamp effect with CSS HTML Codes
  3. LavaLamp effect with CSS CSS Codes
  4. LavaLamp effect with CSS JS Codes

How do I make an lavalamp effect with css?

This is how to make the LavaLamp effect on menu hover, with only CSS.. What is a lavalamp effect with css? How do you make a lavalamp effect with css? This script and codes were developed by Twikito on 11 September 2022, Sunday.

LavaLamp effect with CSS Previews
IQ Test

LavaLamp effect with CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LavaLamp effect with CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:400);
nav { display:block; width:750px; margin:30px auto; padding:5px; border-radius:3px; background:#BDC3C7; font-family:Lato;
}
nav ul { position:relative; display:inline-block; margin:0; padding:0; z-index:0; overflow:hidden; list-style:none; vertical-align:top;
}
nav li { float:left; padding:0;
}
nav li:last-child { position:absolute; left:-150px; width:150px; height:40px; z-index:-1; border-radius:3px; background:#34495E; opacity:0; transition:all 300ms ease-in-out;
}
nav a { display:block; width:150px; font-size:16px; line-height:40px; color:#fff; text-decoration:none; text-align:center;
}
nav a:hover, nav a:focus { color:#fff;
}
nav li:nth-child(1):hover~li:last-child { left:0; opacity:1; }
nav li:nth-child(2):hover~li:last-child { left:150px; opacity:1; }
nav li:nth-child(3):hover~li:last-child { left:300px; opacity:1; }
nav li:nth-child(4):hover~li:last-child { left:450px; opacity:1; }
nav li:nth-child(5):hover~li:last-child { left:600px; opacity:1; }
/* BLAH BLAH */
body { background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <ul> <li><a href="#" title="">Item 1</a></li> <li><a href="#" title="">Item 2</a></li> <li><a href="#" title="">Item 3</a></li> <li><a href="#" title="">Item 4</a></li> <li><a href="#" title="">Item 5</a></li> <li></li> </ul>
</nav>
<!-- Another Pen? codepen.io/Twikito --> <script src="js/index.js"></script>
</body>
</html>

LavaLamp effect with CSS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400);
nav { display:block; width:750px; margin:30px auto; padding:5px; border-radius:3px; background:#BDC3C7; font-family:Lato;
}
nav ul { position:relative; display:inline-block; margin:0; padding:0; z-index:0; overflow:hidden; list-style:none; vertical-align:top;
}
nav li { float:left; padding:0;
}
nav li:last-child { position:absolute; left:-150px; width:150px; height:40px; z-index:-1; border-radius:3px; background:#34495E; opacity:0; transition:all 300ms ease-in-out;
}
nav a { display:block; width:150px; font-size:16px; line-height:40px; color:#fff; text-decoration:none; text-align:center;
}
nav a:hover, nav a:focus { color:#fff;
}
nav li:nth-child(1):hover~li:last-child { left:0; opacity:1; }
nav li:nth-child(2):hover~li:last-child { left:150px; opacity:1; }
nav li:nth-child(3):hover~li:last-child { left:300px; opacity:1; }
nav li:nth-child(4):hover~li:last-child { left:450px; opacity:1; }
nav li:nth-child(5):hover~li:last-child { left:600px; opacity:1; }
/* BLAH BLAH */
body { background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_grid.png) repeat; }

LavaLamp effect with CSS - Script Codes JS Codes

// NO JS
LavaLamp effect with CSS - Script Codes
LavaLamp effect with CSS - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3.5
Size 2,720 Kb
Views 34,408
Do you need developer help for LavaLamp effect with CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Name
Easy and Bulletproof ScrollTo Script
UI with UX improvements with only CSS
Input awesome effect on focus with only css
Flexible Google-style loader with CSS
Beautiful Textual Map of the USA with CSS
Breadcrum for shopping path with only css
Picture hover effect with pseudo-elements
Full page table inside the grid
CSS3 trendy retro photo effect
Lightbox without JS, with lazy load
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!