CSS悬停动画到“静止”？答案

【问题标题】：CSS Hover-Animation to 'Still'?CSS悬停动画到“静止”？
【发布时间】：2022-09-27 23:54:21
【问题描述】：

下面的代码让我的按钮在悬停时在动画中发光。

现在我试图让它工作而无需将鼠标悬停在它上面。

通常，我会选择 .class:hover 并尝试在那里编辑一些东西。但是对此有点困惑，因为该属性中只有 1 行。

谢谢你的帮助

.drts-bs-btn-outline-primary {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.drts-bs-btn-outline-primary:before {
    content: \'\';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.drts-bs-btn-outline-primary:active {
    color: #000
}

.drts-bs-btn-outline-primary:active:after {
    background: transparent;
}

.drts-bs-btn-outline-primary:hover:before {
    opacity: 1;
}

.drts-bs-btn-outline-primary:after {
    z-index: -1;
    content: \'\';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

拥有一个包含 HTML 的工作 sn-p 可能会使这成为一个更好的问题。

标签： html css

【解决方案1】：

要使按钮即使在不悬停时也会发光，您应该将.drts-bs-btn-outline-primary:hover:before（注意:hover）的内容移动到.drts-bs-btn-outline-primary:before（注意缺少:hover）。换句话说，您应该删除opacity: 0; 行。

【讨论】：

【解决方案2】：

它不起作用的唯一原因是动画被设置为opacity: 0;，直到它被悬停。使用下面的代码，您将不再需要 .drts-bs-btn-outline-primary:hover:before { opacity: 1; } css 规则

.drts-bs-btn-outline-primary {
    width: 220px;
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}
.drts-bs-btn-outline-primary:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.drts-bs-btn-outline-primary:active {
    color: #000
}

.drts-bs-btn-outline-primary:active:after {
    background: transparent;
}

.drts-bs-btn-outline-primary:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* GLOWING TEXT STARTS HERE */
.amazing-h2 {
  animation: amazing-h2-glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes amazing-h2-glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

<button class="drts-bs-btn-outline-primary">Click Me!</button>

<br><br>

<h2 class="amazing-h2">This is an H2</h2>

【讨论】：

谢谢！欣赏它另外，有没有办法在纯文本上使用该动画？一直在尝试，但没有任何成功再次，非常感谢
我会稍微不同地处理文本，我已经添加了代码让你开始，但你必须调整颜色才能让它看起来像你希望的那样！