gpt4 book ai didi

html - 关键帧在与 LESSHat 的 LESS 混合中不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 12:30:44 29 4
gpt4 key购买 nike

这是我尝试生成的标准 CSS,但我想使用 LESS Mixin 来完成这项工作。您可以使用纯 css 查看工作演示 here

纯 CSS

@keyframes rotate {
0%{
transform: rotate(0deg);
}

100% {
transform: rotate(180deg);
}
}

@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(180deg);
}
}

@keyframes rotate-fix {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

@-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
}

100% {
-webkit-transform: rotate(360deg);
}
}

我正在使用与 following post 中相同的 mixin如下所示。

.keyframes(@name, @frames) {
@-webkit-keyframes @name { @frames(); }
@-moz-keyframes @name { @frames(); }
@-ms-keyframes @name { @frames(); }
@-o-keyframes @name { @frames(); }
@keyframes @name { @frames(); }
}

我是这样使用它的:

.keyframes(rotate, {
0%{
.transform(rotate(0)); // This is transform mixin from LESSHat
}

100%{
.transform(rotate(180));
}
});

.keyframes(rotate-fix, {
0%{
.transform(rotate(0));
}

100%{
.transform(rotate(360));
}
});

但是,它不起作用。按钮的动画不会旋转。当不将其作为混入时,该代码可以正常工作。谁能告诉我我在这里缺少什么?

生成的 CSS 如下所示:

@-moz-keyframes rotate {
.....
}
@-o-keyframes rotate {
.....
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}

@-moz-keyframes rotate-fix {
.....
}
@-o-keyframes rotate-fix {
.....
}
@-webkit-keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-fix {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}

最佳答案

一定要插值

像这样:

    .keyframes(~'<keyframes-name>, <keyframes-definition>') 

看看Less Hat docs keyframes section .

关于html - 关键帧在与 LESSHat 的 LESS 混合中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27679363/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com