在less文件 css工程化 :global中写入动画，动画不生效的解决办法

LINMO-ZHUNBEIWANBI

于 2023-07-19 13:58:01 发布

阅读量503

点赞数

文章标签： css less 前端

本文链接：https://blog.csdn.net/liuxiaocaogu/article/details/131807254

版权

原因在css工程化之后，会给类名加一个hash值避免类名重复，如果将动画直接写入less文件中是不会生效的因为无法找到该动画名字

解决办法

.scan {
              position: absolute;
              z-index: 999;
              top: 0;
              height: 100px;
              width: 680px;
              background: linear-gradient(to bottom, transparent, #3e88f1);
              // border-radius: 20px;
              :local{
                animation: scan 3s infinite;
              }
            }
            @keyframes scan {
              from {
                top: 0;
              }
              to {
                top: 290px;
              }
            }
             @-webkit-keyframes scan {
              from {
                top: 0;
              }
              to {
                top: 290px;
              }
            }

看到那个：local了吗？没错加个他就ok