如何在HTML5中实现文字淡出淡入

如何在HTML5中实现文字淡出淡入,第1张

你把底下这段代码运行下:

<!DOCTYPE html>

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeToggle()

$("#div2").fadeToggle("slow")

$("#div3").fadeToggle(3000)

})

})

</script>

</head>

<body>

<p>演示带有不同参数的 fadeToggle() 方法。</p>

<button>点击这里,使三个矩形淡入淡出</button>

<br><br>

<div id="div1" style="width:80pxheight:80pxbackground-color:red"></div>

<br>

<div id="div2" style="width:80pxheight:80pxbackground-color:green"></div>

<br>

<div id="div3" style="width:80pxheight:80pxbackground-color:blue"></div>

</body>

</body>

</html>

在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果。

META标签是HTML语言HEAD区的一个辅助性标签,Meta 标签放在每个网页的<head>...</head>

中间,我们大家比较熟悉的如:

<meta name="GENERATOR" content="Microsoft FrontPage

3.0">//说明编辑工具;

<meta name="KEYWORDS" content="...">//说明关键词;

<meta name="DESCRIPTION" content="...">//说明主页描述;

它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以

根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等

用法:

<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

blendTrans是css动态滤镜的一种,产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

动态滤镜可以为页面添加动人的淡入淡出、图象转化效果,它可以分为两种blend(混合)和reveal(显示),

前者可以使对象渐渐消失或出现,后者提供了24种图象转化的效果......

<Meta http-equiv="Page-Enter"

Content="revealTrans(duration=x, transition=y)">

<Meta

http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

Duration:表示滤镜特效的持续时间(单位:秒)

Transition:滤镜类型。表示使用哪种特效,取值为0-23。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11792868.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存