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

Posted 2023-03-06

【中文标题】如何为边框动画添加悬停过渡

【英文标题】：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%);
    

【参考方案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>