3

我使用这个纯 CSS 制作的 LavaLamp 效果，我几乎对它感到满意：

HTML：

<ul>
   <li><a href="#">✿&lt;/a></li><!--
--><li><a href="#">Lorem</a></li><!--
--><li><a href="#">Ipsum</a></li><!--
--><li><a href="#">Consectetur adipisicing</a></li><!--
--><li><a href="#">Sit amet</a></li>
 </ul>

CSS：

html{
font-family:sans-serif;
font-size:1.2em;
background:#eee;
}

ul{
position:relative;
width:27em;height:2em;
margin:100px auto;
padding:0;
white-space:nowrap;
}

ul li{
display:inline;
text-align:center;
}

ul li a{
position:relative;
top:0;left:0;right:25em;bottom:0;
display:inline-block;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:.4em .2em;
color:#09C;
text-decoration:none;
text-shadow:0 1px 0 white;
/*transition*/
-webkit-transition:width .3s,right .3s;
   -moz-transition:width .3s,right .3s;
     -o-transition:width .3s,right .3s;
        transition:width .3s,right .3s;
}

ul li:nth-child(1) a{
width:2em;
}

ul li:nth-child(2) a{
width:4em;
}

ul li:nth-child(3) a{
width:4em;
}

ul li:nth-child(4) a{
width:12em;
}

ul li:nth-child(5) a{
width:5em;
}

ul li:last-child a::after{
content:"";
position:absolute;
right:inherit;
bottom:-3px;
width:inherit;
height:3px;
background:#ccc;
  pointer-events:none;
/*transition*/
-webkit-transition:all .5s ease;
   -moz-transition:all .5s ease;
     -o-transition:all .5s ease;
        transition:all .5s ease;
}

ul li:nth-child(1) ~ li:last-child a{
right:25em;
width:2em;
}

ul li:nth-child(2):hover ~ li:last-child a{
right:21em;
width:4em;
}

ul li:nth-child(3):hover ~ li:last-child a{
right:17em;
width:4em;
}

ul li:nth-child(4):hover ~ li:last-child a{
right:5em;
width:12em;
}

ul li:nth-child(5):last-child:hover a{
right:0;
width:5em;
}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after{
background:#c351fa;
}

ul li:last-child a{
min-width:5em;max-width:5em;
}

ul li a:hover,ul li a:focus{
color:#c351fa;
background-color:rgba(255,255,255,.6);
/*transition*/
-webkit-transition:width .3s,right .3s,background-color .3s;
   -moz-transition:width .3s,right .3s,background-color .3s;
     -o-transition:width .3s,right .3s,background-color .3s;
        transition:width .3s,right .3s,background-color .3s;
}

ul li a:focus{
border-bottom:3px solid #c351fa;
}

JSFiddle.net 上的示例：

点击在 JSFiddle.net 上查看上面的示例

不幸的是，当其他菜单项被单击时，LavaLamp 会跳回原始菜单项，因此被设置为.active状态。如何保持放置在当前活动菜单项上的效果（根据当前的.active -child）？

非常感谢你的帮助！:-)

4

1 回答 1

1

The solution that will work here is by including radio-button for each of your links. The, via the ~ selector and the input:checked property, you can manipulate the links the stay in a certain "state". You have to include the radio-buttons, make the the same size as the li and then set opacity to 0. This way, you can adjust the position of you underline for when a link is selected, because the checkboxes remain checked, even when the user stops hovering over the links. Be sure to give all checkboxes the same name-property, so that if another link is selected, the previous checkbox will be unchecked! If you have any more question, I can see whether I could edit your fiddle, but your code is quite extensive! But your work is very impressive, looks extremely cool!

于 2015-07-16T18:28:23.643 回答