随风飘扬的国旗特效，JS+CSS动感的旗帜飘扬代码

发布时间：2018-08-15 23:03 所属栏目：120 来源：站长网

导读：每当国歌响起的时候，我们就会看到随风飘扬的国旗！但是您有没有在网页上看到类似GIF动画的图片国旗特效呢？这让小编想起了3年前烈火网发表的一篇教程：PS制作旗帜飘扬的GIF动画效果！不好意思，亲爱的朋友们，跑题了！这里要说明一点，我们是使用的JS+CSS

　　每当国歌响起的时候，我们就会看到随风飘扬的国旗！但是您有没有在网页上看到类似GIF动画的图片国旗特效呢？这让小编想起了3年前烈火网发表的一篇教程：PS制作旗帜飘扬的GIF动画效果！不好意思，亲爱的朋友们，跑题了！这里要说明一点，我们是使用的JS+CSS+PNG图片实现的，也就是JS赋予PNG图片GIF动画效果，动感的旗帜飘扬代码，强烈推荐大家收藏或研究此代码。

　　示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title><b>DirectX</b> Demo -- 飘扬的国旗特效</title> <style> span { margin-right: 10px; } #imgFlag { filter: progid:DXImageTransform.Microsoft.Wave(freq=2,LightStrength=15,Phase=0,Strength=4) progid:DXImageTransform.Microsoft.BasicImage(rotation=3) progid:DXImageTransform.Microsoft.Blur(PixelRadius=1); } </style> </head> <body>  请用<b>IE浏览器</b>预览... <style>#imgFlag{display: none}</style>  <img id="imgFlag" src="/uploads/allimg/1112/Veryhuo_CN.png" /> <hr /> <p> <span>国旗:</span> <select id="selFlag"> <option value="Veryhuo_CN">中国</option> <option value="Veryhuo_US">美国</option> <option value="Veryhuo_UK">英国</option> <option value="Veryhuo_FR">法国</option> </select> </p> <p> <span>消除锯齿:</span> <input type="checkbox" id="chkBlur" checked="checked" /> </p> <script> var fltWav = imgFlag.filters[0]; var fltBlur = imgFlag.filters[2]; var i = 0; setInterval(function() { fltWav.Phase = i % 100; i += 3; }, 1); selFlag.onchange = function() { var opt = this.options[this.selectedIndex]; imgFlag.src = "/uploads/allimg/1112/" + opt.value + ".png"; }; chkBlur.onclick = function() { fltBlur.enabled = this.checked; }; </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）