巧用CSS的RevealTrans滤镜 动画切换效果

最新推荐文章于 2021-06-02 16:25:12 发布
最新推荐文章于 2021-06-02 16:25:12 发布
阅读量295 收藏
点赞数
分类专栏： javascript 文章标签： CSS 医疗 IE HTML JavaScript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangpingjing/article/details/83876170
版权

 
 CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,其它的非IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的

 

以下实例 同时支持IE和FF


示例：

 
<html>
<head>
<title>政策法规</title>
<LINK href="style.css" type=text/css rel=stylesheet>
</head>
<body background=/Templets/images/zcwd_policy.gif οnlοad="playAd()">
 <table width=453 border=0 cellspacing=3 cellpadding=0>
  <tr>
   <td id=divText style="filter:revealTrans(Transition=23,Duration=2)"></td>
  </tr>
 </table>
 
 
 <div id="content_0" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问：如何现金提取市区城镇职工医疗保险医疗费综合减负金额？
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; （一）在保人员提取减负金额程序</DIV>
<DIV>&nbsp;&nbsp;&nbsp; 需要提取综合减负金额的参保人员，可到工商银行各营业网点（宁波大市范围内，下同）办理登记手续。办理登...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/1014596539044261100702141059.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <div id="content_1" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问：市区城镇职工医疗保险医疗费综合减负每年什么时候划入个人历年账户？
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; 市级医保经办机构于每年7月1日将综合减负金额划入综合减负人员的历年个人账户。2008医保年度未申报提取的综合减负金额于2010年7月1日统一划入参保人员的历年个人账户。</DIV>
<DIV...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/101437729137574020710143710.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <div id="content_2" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问：如何查询是否符合市区城镇职工医疗保险医疗费综合减负的条件？
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; 市劳动保障部门在每个医保年度结束后对医疗费用进行统算、审核，确定上年度符合条件的综合减负对象。参保人员可于每年7月1日起查询是否属于综合减负对象，查询渠道如下：</DIV>
<DIV>&nb...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/1014255227125030100702101425.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <div id="content_3" style="display:none">
  <TABLE cellSpacing=0 cellPadding=0 width=560 align=center border=0 >
   <TBODY>
    <TR>
     <TD width=31 height=29>
      <IMG height=20 src="/Templets/images/zcwd_5.gif" width=21>
     </TD>
     <TD width=529>
      问：哪些人符合市区城镇职工医疗保险医疗费综合减负的条件？
     </TD>
    </TR>
    <TR>
     <TD background=/Templets/images/line_2.gif colSpan=2 height=1></TD>
    </TR>
    <tr><td height=10></td></tr>
    <TR>
     <TD>
      <IMG height=20 src="/Templets/images/zcwd_6.gif" width=21>
     </TD>
     
     <TD class=news>
      <DIV>&nbsp;&nbsp;&nbsp; 市区城镇职工基本医疗保险、住院医疗保险和外来务工人员大病保险参保人员在医保年度（当年5月1日至次年4月30日）内，门诊、特殊病种和住院治疗（包括应急记账、院外检查治疗、处方购药）发生的并在该医...&nbsp;&nbsp;<SPAN class=red><a href="/Html/pol_zcwd/2010-07/02/1014102406371449101410100702.html" target="_blank">&gt;&gt;详细内容</a></SPAN>
      
     </TD>
    </TR>
   </TBODY>
  </TABLE>
 </div>
 
 <script language="JavaScript">
Text = new Array();
 
 Text[0]=document.all['content_0'].innerHTML;
 
 Text[1]=document.all['content_1'].innerHTML;
 
 Text[2]=document.all['content_2'].innerHTML;
 
 Text[3]=document.all['content_3'].innerHTML;
 
if(Text.length==0){
  Text[0]="没有数据";
  Text[1]="请先录入";
}
var IDX= -1;
function playAd() {
 if (IDX==Text.length-1) {
  IDX=0;
 } else {
  IDX++;
 }
 var prefix = "";
 var divTextV = document.getElementById("divText");
 if(navigator.userAgent.indexOf("MSIE")>0)
 {
 divTextV.style.filter="revealTrans(Transition="+Math.floor(Math.random()*23+1)+",Duration=2)";
 divTextV.filters[0].apply();
 divTextV.innerHTML = prefix + Text[IDX];
 divTextV.filters[0].play();
 }else{
 divTextV.innerHTML = prefix + Text[IDX];
 }
}
 setInterval("playAd()",6000);
</script>
</body>
</html>

 

css3动画案例，滤镜的各个使用比较
xh0112的博客
12-17 243
css动画案例，用案例看出其用法动画复合写法案例，制作音乐盒滤镜滤镜阴影与盒子阴影的对比。 动画 动画 通过@keyframs定义动画。 在指定元素中，通过animation属性来调用动画。 定义动画 格式： @keyframes 动画名{ from{ 初始帧 } to{ 结束帧 } } 【注】动画名不要起关键词，最好见名知意。 动画的调用： 通过animation属性来调用动画。 示例 animation-name：动画名称 animation-duration 执行一次动画的完成时间。
CSS3滤镜效果动画生成器 Css Filterlab.rar
07-09
Css Filterlab是一款免费开源程序，并且属于网页程序，所以，每一位有需要的人，都是可以自由下载程序的。 使用方法很简单，点击 Add Filter 按钮就可以看到当前 CSS3 所支持的所有滤镜效果了。 点击不同的滤镜效果就可以添加各种参数了，效果会即时的显示在右边的界面中，参数有点类似 Photoshop 的图层效果，具有一定的优先级别，你可以拖动参数配置参数的优先级别。 代码是实时生成并且高亮的。 通过下方的时间轴，可以制作比较复杂的滤镜效果。 注意：本程序需要在Chrome/FireFox等浏览器下运行，IE是不行滴。
css 滤镜_动画CSS图像滤镜
cungui5726的博客
08-19 246
css 滤镜In recent articles I’ve shown how to create cross-browser image filter effects with CSS and SVG: converting color photographs to black and white and sepia-tone, as well as blurring them. The nex...
CSS的revealTrans滤镜在网页中制作特效
知周博远
05-23 431
CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们预备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 　　实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。 　　制作方法： 　　1、在&lt;head&gt;中插入JS代码： &lt;SCRIPT language=JavaScript1.2&gt; funct...
CSS的RevealTrans动态滤镜
ze_lin_huang的专栏
02-02 718
CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。　　 两个参数Transition和Duration，分别是变换效果和持续时间，其中Duration是浮点数。　　 此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。　　 设置完后还需要运行apply和p
RevealTrans滤镜的用法
03-17
讲解CSS动态滤镜RevealTrans滤镜的用法，transition参数的参数值有24中，以代号0-23来表示，分别代表24中显示类型
巧用CSS滤镜制作绚丽图片播放效果
09-27
本文将重点讲解如何利用CSS中的`revealTrans`滤镜来制作一个超炫的图片播放效果，同时确保每张图片都有自己的链接地址，使得用户点击图片时能够跳转到不同的页面。 首先，`revealTrans`滤镜是CSS1中的一个特性，它...
JavaScript与CSS滤镜实现图片随机切换效果
本篇文章主要介绍了如何使用JavaScript和CSS来实现在网页上动态切换图片，并应用滤镜效果。通过结合HTML、JavaScript以及CSS，作者展示了一个简单的图片轮播功能，图片之间可以随机切换，并且每次切换都会应用不同的...
23种图片滤镜效果的JavaScript+CSS滚动展示
在Web开发中，使用JavaScript和CSS来实现图片样式切换和滚动效果是一种常见且吸引人的技术。...需要注意的是，由于RevealTrans滤镜的现代浏览器兼容性问题，现更推荐使用其他CSS动画或者过渡效果来实现类似的功能。
js带前后翻页的图片切换效果代码分享
10-23
同时，由于CSS滤镜主要在旧版的IE浏览器中支持，现代浏览器可能需要其他方法来实现平滑的图片切换效果，例如使用CSS3的过渡（Transitions）或动画（Animations）。 总结来说，通过使用JavaScript，我们可以实现带有...
js实现随即图片切换效果
11-21
### JavaScript 实现随机图片切换效果 #### 知识点概览 本文将详细介绍如何使用JavaScript实现随机图片切换的效果。此效果常用于网站轮播图、广告位更换等场景，能够增强用户交互体验并提高页面活跃度。具体涉及的...
filters.revealTrans.Transition使用方法小结
09-05
有看到幻灯片调用会用到divid.filters.revealTrans.Transition=Math.floor(Math.random()*23)和divid.filters.revealTrans.apply(),那么这两个都是什么意思呢?
RevealTrans
03-11
图形特效 javascript 滤镜效果
ScrollReveal-元素随页面滚动产生动画
05-16
ScrollReveal-元素随页面滚动产生动画
Filter:revealtrans(duration=转换的秒数，transition=转换的类型）
盖茨的专栏
03-06 1787
表达式中的transition参数的参数值有24中，以代号0-23来表示，分别代表24中显示类型，具体的参数值列表如下所示：同时还可以参考一下以下的页面转换特效：网页变换效果（Trans）共分四大类："进入网页"（Page-Enter）、"离开网页"（Page-Exit）、"进入站点"（Site-Enter）、"离开站点"（Site-Exit）。每一大类又分为25个小类，先用进入网页效果来举例说明
html自动镜像代码,利用css动画属性rotate来实现镜像翻转
weixin_30711223的博客
06-02 1121
要实现镜像翻转，有两种实现方法：方法一：利用css动画属性rotate旋转来实现具体代码：.mirrorRotateLevel {transform: rotateY(180deg); /* 水平镜像翻转 */}.mirrorRotateVertical {transform: rotateX(180deg); /* 垂直镜像翻转 */}此处，rotateY(180deg) 这里的 Y 表...
巧用CSS的RevealTrans滤镜
aome1470的博客
11-04 217
作者：冯永曜 CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换，简直方便极了，你只要在网页源代码的<head>与</head>之间插入这样一行代码：<Metacontent=...
揭露动画（RevealAnimator）的基本使用
FengZH的博客
10-19 1003
前言 揭露动画是 Android 5.0 的新特性，使用该动画后，在显示或隐藏视图的时候能够给用户提供视觉连续型。 效果 先上最终的效果图，毕竟只有当你对动画效果感兴趣的时候，才会认真地看它的代码实现。 由于是在模拟器上运行，可能有点卡顿，在真机上效果会更好 API 在讲代码实现前，先介绍下实现揭露动画的 API：ViewAnimationUtils.createCircularReveal 方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值