<div
style="position:absolutez-index:100width:100%height:100%background-color:#999filter:Alpha(Opacity=50)"></div>
注意：这个效果要设置浏览器允许运行活动内容
方法一：
HTML5+CSS，注意，只有支持HTML5的浏览器才行，百度的也一样，我用搜狗浏览器切换到IE内核就变成正方形图片了。代码如下
<style>img {
-webkit-border-radius: 50%
-moz-border-radius: 50%
-ms-border-radius: 50%
-o-border-radius: 50%
border-radius: 50%
}
</style>
<body>
<img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/ting/s%3D90/sign=f04adce1d42a60595610ed1a2834fa08/b2de9c82d158ccbfcdc485121ad8bc3eb1354199.jpg">
</body>
方法二：
把图片设置成DIV的背景，然后在DIV里再装一张有圆形孔的GIF图片，中间的圆形孔做成透明。
此方法兼容所有浏览器。
我们可以通过FLASH中的遮罩技术来完成这个效果。首先需要两张图片，来实现相互之间的切换。 具体步骤 1、 运行Flash MX 2004，建立一个新文档。 2、 适当修改文档属性，尺寸400*300，帧频12帧/秒。 3、将图层1命名为图片1，并导入一张图片，调整至于场景同样大小。如图2.4.122所示。 图2.4.122 导入第1张图片 4、新建一图层，命名为“图片2”，并再导入一图片，同样，调整到与主场景同大。如图2.4.123所示。 图2.3.123 导入第2张图片 5、按Ctrl+F8新建一影片剪辑，命名为“叶片”。如图2.3.124所示。 图3.2.124 新建影片剪辑 6、在影片剪辑 “叶片”中画一无线框的矩形，长400（同主场景的宽）高30（主场景的1/10大小），并让其中心对齐。颜色随意。如图2.4.125所示。 图2.4.125 无线框矩形 7、在第30帧处插入关键帧，将矩形尺寸改为400×1。如图2.4.126所示。 图2.4.126 第30帧矩形 8、设置1－30帧为形状渐变动画，并在第30帧中加入stop()（如果你想让百叶窗效果循环，也可以不加）。如图2.4.127所示。 图2.4.127 第1帧与第30帧创建形状渐变动画 9、新建一影片剪辑，命名为“百叶窗”。进入到“百叶窗”影片剪辑编辑区。如图2.4.128所示。 图2.4.128 进入影片剪辑“百叶窗”编辑区。 10、按“Ctrl+L”打开库面板，并拖出10个‘叶片’影片剪辑。（也可以拖出一个后，再复制出9个。并整齐地排列，使其完全复盖主场景。如图2.4.129所示。 图2.4.129 10个“叶片”排列 11、回到场景1中，并新建一图层，命名为“百叶窗”。把‘百叶窗’电影符号拖入进来，并中心对齐。如图2.4.130所示。 图2.4.130 图层“百叶窗” 12、鼠标右键【遮罩层】，设置‘百叶窗’层为遮照层。 13、保存测试。 14、我们发现，图片没能完全切换，还有一个小条（没加stop除外）。 15、这时我们可以修改一下‘叶片’影片剪辑。进入‘叶片’影片剪辑编辑区，在第31帧中插入一空白关键帧（快捷键F7）并把第30帧中的stop()删除。在31帧中加入stop()如图2.4.131所示。 图2.4.131 “叶片”影片剪辑时间线 16、保存测试。完成。参看源文件百叶窗效果.fla 注 意—— 图层“遮罩层”只是遮罩图片2图层。 提 示——我们可以把这个效果延伸一下，把影片剪辑“叶片”的形状变化延长至第60帧，在第30帧与第60帧之间作复原的形状渐变动画。 技 巧——利用影片剪辑作遮罩动画，我们就可以重返发挥影片剪辑变化多的特点。 试一试 ——我们试着做一个多个正方形的百叶窗效果。 分 析——我们为什么用遮罩动画来完成这个效果呢？用其他的技术也可以实现的，例如我们把上面的图片截取成10个矩形，然后把每一个矩形图片作形状渐变动画，这样可以实现百叶窗效果。但是这种做法太麻烦了，利用遮罩来做这种效果可以事半功倍。 特别提示 本例源文件效果只是做了一个百叶窗的变化，我们可以通过改变影片剪辑“叶片”的变化规律来调整动画效果。 特别说明为什么会出现第14步骤中的不成功的效果呢？原因在于，我们制做的“叶片”影片剪辑的第30帧是一个高1个像素的矩形并停止播放。当这1像素的矩形反应到遮罩中，就出现了存留的现象。解决的方法有很多，上例中的步骤15就是其中一种，在第31帧加一个空白关键帧，也就是相当于这个形状渐变动画从第1帧到第31帧消失。所以效果成功。你也可以去这个风站里看,里面有很多代码: http://hongfeng.laiwunews.cn/200841920041.html欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）