如何为边框动画添加悬停过渡答案

【问题标题】：How to add a hover transition to an animation of borders如何为边框动画添加悬停过渡
【发布时间】：2021-08-13 11:25:40
【问题描述】：

我希望能够将鼠标悬停在这个动画上并让它过渡到另一种颜色。我无法将此转换添加到变量中。标准 css 转换只是在类颜色中添加一个 :hover ，但在使用变量时我似乎在这里遗漏了一些东西。有什么建议吗？

<div class="cloader">   
    <div class="loader">
        <span class="colors" style="--i:0;"></span>
        <span class="colors" style="--i:1;"></span>
        <span class="colors" style="--i:2;"></span>
        <span class="colors" style="--i:3;"></span>
        <span class="colors" style="--i:4;"></span>
        <span class="colors" style="--i:5;"></span>
        <span class="colors" style="--i:6;"></span>
        <span class="colors" style="--i:7;"></span>
        <span class="colors" style="--i:8;"></span>
        <span class="colors" style="--i:9;"></span>
    </div>
</div>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #F5F5DC;
    overflow: hidden;
}

.loader {
    position: relative;
    width: 250px;
    height: 250px;
}
.colors {
    position: absolute;
    top: calc(12px * var(--i));
    left: calc(12px * var(--i));
    right: calc(12px * var(--i));
    bottom: calc(12px * var(--i));
    border: 10px solid #dbf;
    border-radius: 50%;
    animation: animate 4s alternate ease-in-out infinite;
    filter: hue-rotate(calc(8deg * var(--i)));
    animation-delay: calc(-0.1s* var(--i));
}


@keyframes animate {
    0%
    {
        transform: scale(0.7) translateX(-10%);
    }

    50%{
        transform: scale(1.3) translateX(10%);
    }

    100%
    {
        transform: scale(1.5) translateX(-10%);
    }
}

【问题讨论】：

标签： html css animation css-animations css-transitions

【解决方案1】：

您只需更改border-color

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #F5F5DC;
    overflow: hidden;
}

.loader {
    position: relative;
    width: 250px;
    height: 250px;
}
.colors {
    position: absolute;
    top: calc(12px * var(--i));
    left: calc(12px * var(--i));
    right: calc(12px * var(--i));
    bottom: calc(12px * var(--i));
    border: 10px solid #dbf;
    border-radius: 50%;
    animation: animate 4s alternate ease-in-out infinite;
    filter: hue-rotate(calc(8deg * var(--i)));
    animation-delay: calc(-0.1s* var(--i));
    z-index: -1;
    transition: border 3s ease-out;
}

.loader:hover .colors {
    border-color: red;
}

@keyframes animate {
    0%
    {
        transform: scale(0.7) translateX(-10%);
    }

    50%{
        transform: scale(1.3) translateX(10%);
    }

    100%
    {
        transform: scale(1.5) translateX(-10%);
    }
}

<div class="cloader">   
    <div class="loader">
        <span class="colors" style="--i:0;"></span>
        <span class="colors" style="--i:1;"></span>
        <span class="colors" style="--i:2;"></span>
        <span class="colors" style="--i:3;"></span>
        <span class="colors" style="--i:4;"></span>
        <span class="colors" style="--i:5;"></span>
        <span class="colors" style="--i:6;"></span>
        <span class="colors" style="--i:7;"></span>
        <span class="colors" style="--i:8;"></span>
        <span class="colors" style="--i:9;"></span>
    </div>
</div>

【讨论】：