JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Resources</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS

html { font-family:verdana; }
ul { margin:1em; list-style:none; text-align:center; }
li { position:relative; display:inline-block; background:#ccc; z-index:1; }
li a { display:block; padding:.5em 1em; text-decoration:none; color:#fff; }
li:before, li:after, a:before, a:after { content:" "; position:absolute; top:50%; left:50%; border:1px solid #000; border-radius:50px; z-index:-1; animation-duration:0; }
li:before { width:20px; height:20px; margin:-10px; animation-name: c1; }
li:after { width:30px; height:30px; margin:-15px; animation-name: c2; }
a:before { width:40px; height:40px; margin:-20px; animation-name: c3; }
a:after { width:50px; height:50px; margin:-25px; animation-name: c4; }

li:hover:before, li:hover:after, li:hover a:before, li:hover a:after { display:block; animation-duration: 3s; }

@keyframes c1 { from { width:20px; height:20px; margin:-10px; } to { width:40px; height:40px; margin:-20px; } }
@keyframes c2 { from { width:30px; height:30px; margin:-15px; } to { width:60px; height:60px; margin:-30px; } }
@keyframes c3 { from { width:40px; height:40px; margin:-20px; } to { width:80px; height:80px; margin:-40px; } }
@keyframes c4 { from { width:50px; height:50px; margin:-25px; } to { width:100px; height:100px; margin:-50px; } }