css - CSS中有没有办法通过触发动作将句子变成首字母缩写词？

Question

我整天都在搜索，要么找不到合适的词，要么我在谷歌搜索方面没有我想象的那么好。

我的想法是将 4 字徽标转换为其 4 字母徽标首字母缩略词版本，这将在粘性菜单上激活，即从长版本开始并滑回首字母缩略词版本或反之亦然。

感谢你的帮助

标签： cssmenustickyelementorgraphical-logo

Answer 1

您没有为您尝试做的事情提供任何代码示例，但我认为我理解您想要完成的工作并将其视为一个小型开发挑战。

读给我听，就像您想从多字 (4) 文本徽标过渡到多字母 (4) 首字母徽标。我做了一个小演示，通过更改 JS 类和 CSS 来做到这一点@keyframes。您可以换掉切换类名的 JS，无论您打算如何触发粘性菜单。

运行下面的代码片段，或使用 SCSS 在 CodePen 中查看

const button = document.querySelector('.toggle-button');
const logo = document.querySelector('.logo');

button.addEventListener('click', function() { 
  logo.classList.toggle('logo--small');
});

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes letterSpacingNegative1em {
    from { letter-spacing: normal; }
    to { letter-spacing: -1em; }
}

@keyframes letterSpacingNegative02em {
    from { letter-spacing: normal; }
    to { letter-spacing: -0.2em; }
}

body {
    padding: 0 1rem;
    font-family: sans-serif;
}

.logo {
    width: fit-content;
    padding: 10px 14px 8px;
    background-color: #eee;
    line-height: 1;
}

.logo--small .logo__word {
    animation-name: letterSpacingNegative02em;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-duration: 0.2s;
    animation-delay: 0.6s;
}

/**
 * The sibling selector has a lower specificity but is functionally the same
 * as using :not(:first-child).
 */
.logo--small .logo__word span ~ span {
    animation-name: fadeOut, letterSpacingNegative1em;
    animation-fill-mode: forwards, forwards;
    animation-timing-function: ease-out, ease-out;
    animation-duration: 0.4s, 0.6s;
    animation-delay: 0s, 0.4s;
}

<p>
  <button class="toggle-button">Toggle Logo Class</button>
</p>

<h1 class="logo">
  <span class="logo__word"><span>Y</span><span>our</span></span>
  <span class="logo__word"><span>M</span><span>ulti</span></span>
  <span class="logo__word"><span>W</span><span>ord</span></span>
  <span class="logo__word"><span>L</span><span>ogo</span></span>
</h1>