中畫網

第十課

上一節我們講了HTML+TIME+CSS來做濾鏡效果，但那個是靜態的，這一節我們來學習下動態效果如何制作。

點這里看效果

代碼如下：

<img id="image4" src=" http://roger01rao.ik8.com/htmlntime/jiaocheng/ffice:smarttags" />05a.jpg" style="position:absolute; left:20; top:150; filter:progidXImageTransform.Microsoft.glow(color='pink',strength='0',enabled='false');">fficeffice" />

<t:set id="glowset1" targetElement="image4" attributeName="filters.item('DXImageTransform.Microsoft.glow').enabled" to="true" begin="glow1.begin" end="glow1.end" />

<t:animate id="glow1" targetElement="image4" attributeName="filters.item('DXImageTransform.Microsoft.glow').strength" from="0" to="20" begin="1" dur="15" autoreverse="true" repeatcount="4" />

大家可以看到，上面的效果其實也就是以前講過的屬性的綜合運動，這個效果就是圖片動態運動發光。首先需要設置發光顏色和不能顯示，然后再設置它可以顯示，接著讓發光強度從0到10增長，也就產生了動態效果，當然CSS靜態濾鏡還有很多，在上一節我已經一一列舉了。在演示里我提供給大家運動發光效果，大家自己可以去嘗試一下另外的效果看看，如果有哪個濾鏡不會出效果，可以在回復帖子里留言，大家一起來學習。