我真的很喜欢hover他们到处找的主按钮的效果，但我没有找到类似的效果，即使他们的网站上没有类似的效果
.btn {
width:100px;
height:40px;
text-align:center;
padding:5px;
line-height:2.3;
border:1px solid red;
}<div class="btn">button</div>之前效果
之后
关于电报协议设备和加密密钥的问题。
特殊服务向电报索要钥匙，并坚称这一要求不违反俄罗斯联邦宪法：我们不向用户索要消息，我们只索要钥匙。
那么抱歉，这些无用的键一般是什么？他们不能破译任何东西吗？总的来说，这些密钥是如何排列的：为每个电报用户存储一个密钥，而 FSB 在恐怖主义刑事案件中需要六个密钥？还是他们想要某种可以解密所有一亿电报用户的任何消息的金钥匙？
相关链接：
SVG如何用阴影和变化的z-index元素来实现类似的例子？
如需完整效果，请展开至全屏并单击以查看动画。
const shadows = document.getElementsByClassName("shadows")[0];
const shadowsChildren = shadows.children;
let count = 0;
let left = false;
shadows.addEventListener("click", function() {
let interval = setInterval(function() {
!left ? count++ : count--;
shadowsChildren[left ? count : count - 1].style.zIndex = left ? count : shadowsChildren.length - count;
shadowsChildren[left ? count : count - 1].className = !left ? 'span' : '';
if (count === shadowsChildren.length) {
left = true;
clearInterval(interval);
}
if (count === 0) {
left = false;
clearInterval(interval);
}
}, 100);
});* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
}
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: orange;
}
.shadows {
cursor: pointer;
background: orange;
position: relative;
text-shadow: -15px 5px 20px #303030;
width: 80vw;
color: orange;
text-align: center;
letter-spacing: -20px;
transition: all 0.25s ease-out .2s;
font-family: fantasy;
font-size: 200px;
}
span {
position: relative;
margin-left: -10px;
transition: all 0.25s ease-out;
}
span.span {
text-shadow: 15px 5px 20px #303030;
transition: all 0.25s ease-out;
}<div id="wrapper">
<div class="container">
<div class="shadows">
<span>C</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>K</span>
<span>M</span>
<span>E</span>
</div>
</div>
</div>选项css:hover
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
}
.container {
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: orange;
}
.shadows {
cursor: pointer;
background: orange;
position: relative;
text-shadow: -15px 5px 20px #303030;
width: 80vw;
color: orange;
text-align: center;
letter-spacing: -20px;
transition: all 0.25s ease-out .2s;
font-family: fantasy;
font-size: 200px;
}
span {
position: relative;
margin-left: -18px;
transition: all 0.25s ease-out;
}
.shadows:hover span {
text-shadow: 15px 5px 20px #303030;
}
.shadows:hover span:nth-child(1) {
z-index: 8;
}
.shadows:hover span:nth-child(2) {
z-index: 7;
}
.shadows:hover span:nth-child(3) {
z-index: 6;
}
.shadows:hover span:nth-child(4) {
z-index: 5;
}
.shadows:hover span:nth-child(5) {
z-index: 4;
}
.shadows:hover span:nth-child(6) {
z-index: 3;
}
.shadows:hover span:nth-child(7) {
z-index: 2;
}
.shadows:hover span:nth-child(8) {
z-index: 1;
}<div class="container">
<div class="shadows">
<span>C</span>
<span>L</span>
<span>I</span>
<span>C</span>
<span>K</span>
<span>M</span>
<span>E</span>
</div>
</div>有一个在HTML/上实现的菜单CSS。我想出了将它与过滤器一起制作的想法，特别是每个菜单项SVG的“粘度”（Goo ）效果。
1.好例子：
2.使用此效果制作的菜单：
问题：如何正确应用此菜单的过滤器？