爬虫配套学习-前端学习笔记06-一些动态效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>滚动延迟_效果_滚动播放</title>
</head>
<body><!-- 上下滑动，数字越大滑动越慢--><marquee direction="up" scrollamount="5" scrolldelay="200">缘分的天空，<br>相识是缘，<br>相知是缘，<br>珍惜这份缘分把！A
</marquee><marquee direction="left" scrollamount="5" scrolldelay="900" behavior="slide"><!-- 左右滑动，数字越大滑动越慢 -->缘分的天空，<br>相识是缘，<br>相知是缘，<br>珍惜这份缘分把！B
</marquee>
</body>
</html>

效果
滚动播放

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>滚动循环_限定滚动次数</title>
</head>
<body><!-- 设置滚动次数为1次，--><marquee direction="up" scrollamount="5" scrolldelay="50" loop="1" width="300px" height="400px">缘分的天空，<br>相识是缘，<br>相知是缘，<br>珍惜这份缘分把！
</marquee>
</body>
</html>

效果
限定次数的滚动播放

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>滚动区域与背景颜色设置</title>
</head>
<body>星座的开机问候语<br><marquee direction="up" scrolldelay="5" scrollamount="3" bgcolor="yellow" hspace="100px">天蝎座通常是高明的搞笑专家，其高明处就在于一个“藏”字，不但善于以一副煞有介事的样子，把笑话说的跟真的一样，而且在逗得大家捧腹大笑之时，他自己却又若无其事，甚至还满脸不懂得样式。所以向像“高压危险，&#8216;现任&#8217;免进！”这样隐晦得搞笑问候语，当然留给蝎子了</marquee>
</body>
</html>

效果
限定区域滚动播放+背景色

网页插入flash动画

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>插入flash动画</title>
</head>
<body>
在网页中插入flash动画效果。
<br>
<embed src="images/A.swf" width="500px" height="300px"></body>
</html>

网页插入MP3

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>插入MP3音乐</title>
</head>
<body>
在网页中插入MP3音乐效果。
<br>
<embed src="images/A.mp3" height="300"></embed>
</body>
</html>

设置超链接跳转

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<header><h1>网站页面之间导航<h1><nav><ul><li><a href="#"></a>首页</li><li><a href="#"></a>公司简介</li><li><a href="#"></a>公司新闻</li></ul></nav></h1></h1>
</header><article></article>
<footer></footer>
</body>
</html>

颜色渐变设置

<!-- 颜色渐变 -->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>
body { background-color:#eeeeee; }
#outer  {margin-left:40px;
margin-top:40px;
}
</style></head>
<body>
<canvas id="canvas1" width="400" height="400"
style="border:2px #333 solid;" >
</canvas>
<script>
var mycanvas=document.getElementById("canvas1");
var cntx=mycanvas.getContext('2d');
var mygradient=cntx.createLinearGradient(30,30,300,300);
mygradient.addColorStop("0","#F00");
mygradient.addColorStop(".25","#FF0");
mygradient.addColorStop(".5","#00F");
// mygradient.addColorStop(".82","#90C");
mygradient.addColorStop("1.0","#0F0");
cntx.fillStyle=mygradient;
cntx.fillRect(0,0,400,400);
</script> </body>
</html>

<!DOCTYPE html>
<html>
<head><title>文本图像</title><style type="text/css">*{margin:padding:0;}</style>
</head>
<body>
<svg><rect width="300" height="200" fill="yellow" /><circle cx="150" cy="80" r="80" fill="green" /><text x="150" y="95" font-size="60" text-anchor="middle">
</svg>
</body>
</html>

效果

爬虫配套学习-前端学习笔记06-一些动态效果相关推荐

关于我写了个开发学习路线供全班同学学习 ———— 前端学习路线（超详细）
前端学习路线超级详细全网汇总学习心得 -------By QiongKe 符号表 ⭐️ 必学 ✅ 建议学 ❌ 一般可以不学,了解即可
爬虫配套学习-前端学习笔记04-表格
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>表格 ...
爬虫配套学习-前端学习笔记01
<html> <head> <title>第一个 HTML 页面</title> <meta http-equiv="content-t ...
爬虫配套学习-前端学习笔记23-CSS相关
<!DOCTYPE html> <html> <head><meta charset="utf-8"><link rel=&q ...
爬虫配套学习-前端学习笔记05-表单
单的用途很多,在制作网页,特别是制作动态网页时常常会用到.表单主要用来收集客户端提供的相关信息,使网页具有交互功能.在网页制作的过程中,常常需要使用表单,如进行会员注册.网上调查和搜索等.访问者可以使 ...
前端学习笔记（HTMLCSS）（06）CSS盒子模型练习
前端学习笔记(HTML&CSS)(06) 练习一:图片列表 <!DOCTYPE html> <html lang="en"> <head> ...
前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
技术胖前端学习路线学习笔记【更新中】
文章目录技术胖前端学习路线学习笔记 1. 网络知识 2. 超文本标记语言(HTML) 3.层叠样式表(CSS) 4.浏览器脚本语言(JavaScript) 5.版本控制管理系统Version Con ...

爬虫配套学习-前端学习笔记06-一些动态效果

爬虫配套学习-前端学习笔记06-一些动态效果相关推荐

最新文章

热门文章