Question

这是一个相对简单的问题，但我搜索没有运气。我正在尝试将以下CSS代码放入我页面上的样式标记中。样式标记中未识别“@”符号。它在CSS文件中工作而不是样式标记，并且出于组织/调试目的，我现在想在样式标记中而不是在CSS中。有什么想法吗？

 .spinnerClass {
    height: 50px;
    width: 50px;
    margin: 0px auto;
    -webkit-animation: rotation .8s linear infinite;
    -moz-animation: rotation .8s linear infinite;
    -o-animation: rotation .8s linear infinite;
    animation: rotation 0.8s linear infinite;
    border-left: 10px solid rgb(0,150,240);
    border-right: 10px solid rgb(0,150,240);
    border-bottom: 10px solid rgb(0,150,240);
    border-top: 10px solid rgb(100,0,200);
    border-radius: 100%;
    background-color: rgb(200,100,250);
}
    @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
    @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
    @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
    @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

Answer 1

上述问题表明使用＆＃34; @＆＃34; aspx页面的样式标记中的字符会导致编译错误并中断页面。

以下是我试图放入标签的代码。

<style>
    @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
    @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
    @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
    @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<style>

该页面抛出了一个编译错误，因为＆＃34; @＆＃34;符号是为Razor引擎保留的（用于asp .net MVC Web项目）。解决方案是逃避＆＃34; @＆＃34;与另一个角色＃34; @＆＃34;字符。所以下面的代码是有用的。

<style>
    @@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
    @@-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(360deg);}
}
    @@-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(360deg);}
}
    @@keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<style>

如何在样式标记中使用@ -webkit

1 个答案: