随风飘零的国旗殊效，JS+CSS动感的旗子飘零代码

发布时间：2018-08-16 08:47:27 所属栏目：编程来源：站长网

导读：每当国歌响起的时辰，我们就会看到随风飘零的国旗！可是您有没有在网页上看到相同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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys