通過javascript或jquery更改css3下拉陰影動畫

-1

我使用css3 -webkit-animation給了我的img風格。這個CSS將從一個屬性動畫到另一個屬性的陰影樣式。（閃爍）通過javascript或jquery更改css3下拉陰影動畫

這是CSS

.firstglow { 
    height: 200px; 
    -webkit-animation: hide 0.3s linear 0s infinite alternate; 
} 

@-webkit-keyframes hide { 
    0% {-webkit-filter: drop-shadow(3px 3px 40px rgba(255,251,0,1)); } 
    100% { -webkit-filter: drop-shadow(0px 0px 40px rgba(255,251,0,0.5)); } 
}

我需要通過動態地改變我的代碼JavaScript和改變顏色元素

這是jQuery的我想：

$('.firstglow').css("-webkit-animation","newGlow 0.5s linear 0s infinite alternate;"); 

var lastSheet = document.styleSheets[document.styleSheets.length - 1]; 
lastSheet.insertRule("@-webkit-keyframes newGlow { 0% {-webkit-filter: drop-shadow(3px  3px 40px " + myCharacterColor + " 1)); } 100% { -webkit-filter: drop-shadow(0px 0px 40px" + myCharacterColor + "0.5)); } }", lastSheet.cssRules.length);

這是小祕密：

http://jsfiddle.net/VbzFj/

來源

2013-10-19 user1463227

你的問題是什麼？可以用一些代碼來說明它嗎？ –

這很好，你必須這樣做。但是如果你想讓我們幫你，至少試着向我們說清楚你想要什麼。舉個例子，給我們你已經有的代碼。 *你有什麼嘗試*。 –

.firstglow { height：200px; -webkit-animation：隱藏0.3s linear 0s無限備用; } @ -webkit-keyframes hide { 0％{-webkit-filter：drop-shadow（3px 3px 40px rgba（255,251,0,1））; } 100％{-webkit-filter：drop-shadow（0px 0px 40px rgba（255,251,0,0.5））; } – user1463227

試試這個：

$(document).ready(function(){ 

    $('.firstglow').css("-webkit-animation", "newGlow 0.5s linear 0s infinite alternate"); 

    var lastSheet = document.styleSheets[document.styleSheets.length - 1]; 
    myCharacterColor = 'rgba(182, 17, 17, 0.5)'; 

    var styelRule = ""; 

    if (navigator.userAgent.search("Chrome") >= 0) { 
     styelRule = '@-webkit-keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}'; 
    } 
    else if (navigator.userAgent.search("Firefox") >= 0) { 
     styelRule = '@-moz-keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}'; 
    } 
    else { 
     styelRule = '@keyframes newGlow{0%{-webkit-filter:drop-shadow(3px 3px 40px ' + myCharacterColor + ');}100%{-webkit-filter:drop-shadow(0px 0px 40px ' + myCharacterColor + ');}}'; 
    } 

    lastSheet.insertRule(styelRule, lastSheet.cssRules.length); 
});

這裏是Demo。

來源

2013-10-23 05:25:44 super

通過javascript或jquery更改css3下拉陰影動畫

回答

相關問題