gpt4 book ai didi

html - 纯 CSS 制作的 LavaLamp 效果 : How to hold the LavaLamp on active menuitem?

转载 作者:太空宇宙 更新时间:2023-11-04 13:13:26 26 4
gpt4 key购买 nike

我使用了这个纯 CSS 制作的 LavaLamp 效果,我几乎对它很满意:


HTML:

<ul>
<li><a href="#">✿</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 上的示例:

Click to see the example above on JSFiddle.net


不幸的是,当其他菜单项被点击时,LavaLamp 会跳回原始菜单项,因此被设置为.active-state。如何保持当前事件菜单项的效果(根据当前 .active-child)?

非常感谢您的帮助! :-)

最佳答案

此处适用的解决方案是为每个链接添加单选按钮。然后,通过 ~ 选择器和 input:checked 属性,您可以操纵链接以保持某种“状态”。您必须包括单选按钮,使其与 li 的大小相同,然后将不透明度设置为 0。这样,您可以在选择链接时调整下划线的位置,因为复选框保持选中状态,即使用户停止将鼠标悬停在链接上。请务必为所有复选框赋予相同的名称属性,这样如果选择了另一个链接,则前一个复选框将被取消选中!如果您还有其他问题,我可以查看是否可以编辑您的 fiddle ,但是您的代码非常广泛!但是你的作品非常令人印象深刻,看起来非常酷!

关于html - 纯 CSS 制作的 LavaLamp 效果 : How to hold the LavaLamp on active menuitem?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30879370/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com