html想做个文字淡入淡出的效果

html想做个文字淡入淡出的效果,第1张

首先要用到dw软件

这里是头部的书写方式

这个地方是body的书写格式

整个代码的书写就是这样了,如果图片还不够清楚的话,我吧代码复制给你,方便 *** 作

<!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><!-- 这里是3个方块的淡出淡入效果 -->

<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>

5.最后的实际效果,从浓到淡。

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

<!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>


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

原文地址: https://outofmemory.cn/zaji/6103832.html

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

发表评论

登录后才能评论

评论列表(0条)

保存