CSS有没有办法通过触发一个动作把一个句子变成首字母缩写词？

Question

我搜索了一整天，要么找不到合适的词，要么我的谷歌搜索能力不如我想象的那么好。

我的想法是将 4 字徽标转换为 4 字母徽标首字母缩写词版本，该版本将在粘性菜单上激活，即从长版本开始，然后滑回首字母缩写词版本，反之亦然.

感谢您的帮助

Answer 1

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

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

运行下面的代码片段，或 view it in a CodePen using SCSS

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>

CSS有没有办法通过触发一个动作把一个句子变成首字母缩写词？

Is there a way in CSS to turn a sentence into an acronym by triggering an action?

css

menu

sticky

elementor

graphical-logo