当前位置：首页 > 编程日记 > 正文

巧用CSS的BlendTrans滤镜

编程日记 2024-11-22 12:00:00

作者：冯永曜
BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些，它只有一个参数：Duration 变换时间，它的功能也比较单一，就是产生一种淡入淡出的效果，不过它的这种效果比起RevealTrans滤镜的淡入淡出效果来要精细的多，你看看下面也就不言而喻了。

图1 第一幅图片

图2 转换中的图片

图3 第二幅图片

由于是动态转换，上面只是我抓的三张图片，只能帮助你了解其转换过程，真正的效果只有待你按我下面讲的方法动手做出来才能看到。使用BlendTrans滤镜也和Revealtrans滤镜一样，需要借助于Javascript来调用它的方法来实现，我们现在就以实现上面这种效果为例来看看如何使用BlendTrans滤镜，首先你必须准备几张同样大小的图片。
制作方法：
1、用老办法（前面的文章已介绍了多次）制作一个BlendTrans滤镜，取名为“myblen"，Duration设置为“3"（即转换时间为3秒），滤镜设置好后，在网页源代码的< head >与< /head >之间将有下面这样的代码：
< style type="text/css" >
< !--
.myblen { filter:blendTrans(Duration=3)}
-- >
< /style >
2、插入第一张图片，在图片的属性面板上给图片加个名称：myimg；
3、把BlendTrans滤镜加载到图片上；这时图片的“img"标记的代码是这样的：< img src="image/cssp1.jpg" width="200" height="134" class="mybend" name="myimg" align="left" >；
4、在网页的源代码< head >与< /head >之间插入下面这段Javascript程序：
< script language="JavaScript" >
< !--
// 获取数组记录数
function ImgArray(len)
{
this.length=len;
}
// 申明数组并给数组元素赋值，也就是把图片的相对路径保存起来，若是图片较多，可增加数组元素的个数，
// 我在这个例子中只用了三张图片，所以数组元素个数为“3"。
ImgName=new ImgArray(3);
ImgName[0]="image/cssp2.jpg";
// 你在制作时要把这里的"image/cssp2.jpg"换成你的图片所在的路径和图片文件名；
ImgName[1]="image/cssp3.jpg";
// 你在制作时要把这里的"image/cssp3.jpg"换成你的图片所在的路径和图片文件名；
ImgName[2]="image/cssp1.jpg";
// 你在制作时要把这里的"image/cssp1.jpg"换成你的图片所在的路径和图片文件名；
var i=1;
// 演示变换效果
function playImg()
{
if (i==2)
{ i=0 ;}
else
{ i++; }
myimg.filters[0].apply(); // 这里的“myimg”是你在网页中插入的那张图片的代号，
myimg.src=ImgName[i]; // 当你改变了插入的图片代号时，这里也一定要改变，
myimg.filters[0].play(); // 否则，程序在变换时可就找不着北了。
// 设置演示时间，这里是以毫秒为单位的，所以“6000"是指每张图片的演示时间是6秒钟，这个时间值要在于
// 滤镜中设置的转换时间值，这样当转换结束后还停留一段时间，让人看清楚图片。
mytimeout=setTimeout("playImg()",6000);
}
-- >
< /script >
5、在网页源代码的< body >加入这样的一句代码：οnlοad="playImg()"。
好了，快按F12欣赏你的杰作吧。
若是想在图片上获得上一篇介绍的RevealTrans滤镜效果，只要把本例中的滤镜代码换一换就行了，动手试试吧！

https://www.dkcj.cn/info/28618.html

巧用CSS的BlendTrans滤镜

相关文章：

百度盯上媒体生意？百度CTO王海峰详解智能媒体中台

[转]Android敏捷开发指南

C# 格式串(收藏)

巧用CSS的Wave滤镜

关于vmware虚拟机linux的扩容问题

用Python玩转PPT！

贝塞尔曲线学习

巧用CSS的 Mask 滤镜

Google Analytics功能篇 - 如何跟踪邮件打开率与点击率

Google排名第一的技术，引数十万人关注！网友：差点我就放弃了！

python的zip函数

Nginx 搭建负载均衡

巧用CSS的Glow滤镜

10大经典排序算法，20+张图就搞定

C# MoreLinq 扩展安装

IOS学习博客不错的大部分是原创

巧用CSS的Light滤镜

没有场景，不做单点技术输出，360数科如何做金融科技的最佳实践？

react构建淘票票webapp，及react与vue的简单比较。

【机器学习】机器学习算法优缺点对比（汇总篇）

PLSQL developer 连接不上64位Oracle 解决办法

Docker 使用教程

话说CSS滤镜

面向隐私AI的TensorFlow深度定制化实践

”拿来搞笑“的大学生活

巧用CSS的Border属性

阿里资深算法专家：如何突围大厂算法面试？

乡下人最嘲笑城里人的16件事，无语了！

2017浅谈面试（一）

乘风破浪的PTM：两年来预训练模型的技术进展