css百叶窗代码（css3百叶窗效果）

今天给各位分享css百叶窗代码的知识，其中也会对css3百叶窗效果进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、请教如何用CSS或JS实现页面进入时产生 百叶窗，溶解 等效果？
• 2、HTML中 CSS+DIV+JS 怎么实现图片切换的特效呢, 百叶窗,淡出淡进之类的呢?
• 3、如何在网页中插入百叶窗！
• 4、css百叶窗效果适用于哪一种网页上

请教如何用CSS或JS实现页面进入时产生 百叶窗，溶解 等效果？

网页转换时的过渡效果

当我们点击网页上的链接时，浏览器页面就会转到链接指向的新的页面，我们想在页面转换时加上过渡效果。

打开这个页面的原代码，在head与/head插入代码：

meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)"

这样这个过渡效果就完成了，很简单吧。现在我们来测试一下效果如何，打开这个页面，然后点击页面上的链接，页面在转到下一个页面的过程中，我们看到页面是从上到下慢慢的转换到第二个页面的。

我们现在再试一个效果，将那段代码换成：

meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)"

我们看到页面是从中间向左右两端展开过渡的，而且速度上快了一点。原因在于Duration和Transition的值不同。

Duration的值为网页动态过渡的时间，单位为秒。

Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

0 盒状收缩 1 盒状放射

2 圆形收缩 3 圆形放射

4 由下往上 5 由上往下

6 从左至右 7 从右至左

8 垂直百叶窗 9 水平百叶窗

10 水平格状百叶窗 11垂直格状百叶窗

12 随意溶解 13从左右两端向中间展开

14从中间向左右两端展开 15从上下两端向中间展开

16从中间向上下两端展开 17 从右上角向左下角展开

18 从右下角向左上角展开 19 从左上角向右下角展开

20 从左下角向右上角展开 21 水平线状展开

22 垂直线状展开 23 随机产生一种过渡方式

当Transition为23时，会随机产生0到22中的一个过渡效果。例如：

meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)"

除了上面两个参数，还有一个http-equiv：

http-equiv="Page-Exit"的意思是指页面离开时产生效果。

它有一种写法，如：

http-equiv="Page-Enter"则是指页面进入时产生的效果。

好了，现在大家自己测试一下效果吧。

当我们点击网页上的链接时，浏览器页面就会转到链接指向的新的页面，我们想在页面转换时加上过渡效果。

打开这个页面的原代码，在head与/head插入代码：

meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)"

这样这个过渡效果就完成了，很简单吧。现在我们来测试一下效果如何，打开这个页面，然后点击页面上的链接，页面在转到下一个页面的过程中，我们看到页面是从上到下慢慢的转换到第二个页面的。

我们现在再试一个效果，将那段代码换成：

meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)"

我们看到页面是从中间向左右两端展开过渡的，而且速度上快了一点。原因在于Duration和Transition的值不同。

Duration的值为网页动态过渡的时间，单位为秒。

Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

0 盒状收缩 1 盒状放射

2 圆形收缩 3 圆形放射

4 由下往上 5 由上往下

6 从左至右 7 从右至左

8 垂直百叶窗 9 水平百叶窗

10 水平格状百叶窗 11垂直格状百叶窗

12 随意溶解 13从左右两端向中间展开

14从中间向左右两端展开 15从上下两端向中间展开

16从中间向上下两端展开 17 从右上角向左下角展开

18 从右下角向左上角展开 19 从左上角向右下角展开

20 从左下角向右上角展开 21 水平线状展开

22 垂直线状展开 23 随机产生一种过渡方式

当Transition为23时，会随机产生0到22中的一个过渡效果。例如：

meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)"

除了上面两个参数，还有一个http-equiv：

http-equiv="Page-Exit"的意思是指页面离开时产生效果。

它有一种写法，如：

http-equiv="Page-Enter"则是指页面进入时产生的效果。

好了，现在大家自己测试一下效果吧。

当我们点击网页上的链接时，浏览器页面就会转到链接指向的新的页面，我们想在页面转换时加上过渡效果。

打开这个页面的原代码，在head与/head插入代码：

meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)"

这样这个过渡效果就完成了，很简单吧。现在我们来测试一下效果如何，打开这个页面，然后点击页面上的链接，页面在转到下一个页面的过程中，我们看到页面是从上到下慢慢的转换到第二个页面的。

我们现在再试一个效果，将那段代码换成：

meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)"

我们看到页面是从中间向左右两端展开过渡的，而且速度上快了一点。原因在于Duration和Transition的值不同。

Duration的值为网页动态过渡的时间，单位为秒。

Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

0 盒状收缩 1 盒状放射

2 圆形收缩 3 圆形放射

4 由下往上 5 由上往下

6 从左至右 7 从右至左

8 垂直百叶窗 9 水平百叶窗

10 水平格状百叶窗 11垂直格状百叶窗

12 随意溶解 13从左右两端向中间展开

14从中间向左右两端展开 15从上下两端向中间展开

16从中间向上下两端展开 17 从右上角向左下角展开

18 从右下角向左上角展开 19 从左上角向右下角展开

20 从左下角向右上角展开 21 水平线状展开

22 垂直线状展开 23 随机产生一种过渡方式

当Transition为23时，会随机产生0到22中的一个过渡效果。例如：

meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)"

除了上面两个参数，还有一个http-equiv：

http-equiv="Page-Exit"的意思是指页面离开时产生效果。

它有一种写法，如：

http-equiv="Page-Enter"则是指页面进入时产生的效果。

HTML中 CSS+DIV+JS 怎么实现图片切换的特效呢, 百叶窗,淡出淡进之类的呢?

ie浏览器中有自带的切换效果可供调用；

其它浏览器的话得自己写程序定位，如淡入淡出可以利用设置css的opacity属性实现；

百叶窗可以利用程序生成N个div，每个div的背景图为你要加载的图，然后设置好每个div的位置即可

如何在网页中插入百叶窗！

我们可以通过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帧消失。所以效果成功。你也可以去这个风站里看,里面有很多代码:

css百叶窗效果适用于哪一种网页上

用css实现百叶窗特效。css经典案例。纯CSS3实现百叶窗动画效果 11-05 纯CSS3实现百叶窗动画效果 纯CSS3实现百叶窗动画效果 CSS...

css百叶窗代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3百叶窗效果、css百叶窗代码的信息别忘了在本站进行查找喔。