如何在樣式標記中使用@ -webkit

這是一個相對簡單的問題，但我沒有運氣搜索。我試圖將下面的CSS代碼放到我的頁面上的樣式標記中。樣式標籤中未識別「@」符號。它在CSS文件中不是樣式標籤，爲了組織/調試目的，我希望它現在在style標籤中，而不是在CSS中。有任何想法嗎？如何在樣式標記中使用@ -webkit

.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);} 
}

來源

2016-05-15 mgmedick

hmm很好地看到更新的描述，該代碼在CSS文件中被很好地識別。這是CSS 3旋轉。 – mgmedick

這是哪個瀏覽器？所有瀏覽器？ – timolawl

嗨@timolawl謝謝你回到我身邊。我發現這個問題，答案在下面。謝謝。 – mgmedick

上述問題表明，在aspx頁面的style標記中使用「@」字符會導致編譯錯誤並導致頁面中斷。

下面是我試圖放在標記中的代碼。

<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>

因爲「@」符號是保留給剃刀引擎的頁面被扔編譯錯誤（在ASP.NET的MVC的Web項目中使用）。解決方法是用另一個「@」字符來轉義「@」字符。所以下面的代碼是有效的。

<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>

來源

2016-05-15 02:08:27 mgmedick

如何在樣式標記中使用@ -webkit

回答

相關問題