阻止 @ 在 Visual Studio 2010 中的 CSS3 中无法识别

Question

我正在使用 vs2010 开发 css3。尝试一些动画。但 intellisense 给出错误 "Unrecognized @ block type" 和“ 关键帧不是已知的 css 属性名称”。下面是我试过的一些。

 @-webkit-keyframes animt1 {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
@keyframes animt1 {
from {background-color: red;}
to {background-color: yellow;}

请帮帮我。提前致谢。

Answer 1

问题

"@" 被识别为 razor 视图语法 - 因此它期望下一个文本成为 razor 语法的一部分。

Razor 语法几乎是 'server side markup'，这意味着它之后的行被视为 'server side code' - 而您希望在此处具有客户端功能。

解决方案 1：外部 Css 文件

要解决此问题，您应该使用 'css files (.css)' 来阻止此语法被视为剃刀语法。

即：将此信息放入单独的 css 文件中，然后将样式表 link 放入您的 <head> 部分。

解决方案 2：转义 @ 符号

您还可以使用转义字符“@”将其从剃须刀语法中转义出来：

例如；

@@-webkit-keyframes progressBar {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }

阻止 @ 在 Visual Studio 2010 中的 CSS3 中无法识别

Block @ not recognized in CSS3 in Visual Studio 2010

css

visual-studio-2010

razor

css-animations

问题

解决方案 1：外部 Css 文件

解决方案 2：转义 @ 符号