css 定义的关键帧动画在悬停时不起作用

ccrfmcuu  于 2023-04-23  发布在  其他
关注(0)|答案(1)|浏览(127)

我试图在类元素的悬停状态下实现一个动画,但是,它似乎是不起作用的。代码如下。

.glass{
    background: linear-gradient(
        90deg,
        transparent,
        transparent 0.75rem,
        var(--color-3) 2rem
    );
   
    height: 100%;
    width: 100%;
    backdrop-filter: blur(.65rem);
    filter: contrast(1.35);
    position: absolute;
    z-index: 99;
    inset: 0;
    opacity: 0.5;
    background-size: 2.5rem 100%;
    /* animation: mymove 5s infinite; */
}

@keyframes mymove {
    0%   {background-size: 2.5rem 100%;}
    25%  {background-size: 2.5rem 75%;}
    75%  {background-size: 2.5rem 25%;}
    100% {background-size: 2.5rem 0%;}
}

.glass:hover {
    animation: mymove 5s infinite;
    /* transition: 0.7;
    opacity: 1; */
}

应用的玻璃效果应该在悬停时逐渐消失。

cngwdvgl

cngwdvgl1#

考虑到你在根目录下添加了这个css变量

:root {
  --color-3: red;
}

尝试添加background-repeat: no-repeat;,它将帮助您看到动画工作。

.glass{
    background: linear-gradient(
        90deg,
        transparent,
        transparent 0.75rem,
        var(--color-3) 2rem
    );
   
    height: 100%;
    width: 100%;
    backdrop-filter: blur(.65rem);
    filter: contrast(1.35);
    position: absolute;
    z-index: 99;
    inset: 0;
    opacity: 0.5;
    background-size: 2.5rem 100%;
    background-repeat: no-repeat;   /* add this line */
}

相关问题