整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天接着来给大家分享一个非常好玩的小动画，是在HTML5实训中了解到并学习到的。它是一只可爱的鲸鱼，会随着鼠标的移动而移动，鼻尖会跟随着鼠标。
先来张萌图：
我们先来看看动画的效果：
这个有趣的案例使用了SVG的<defs>元素，它用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用<defs>元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用。
简单说下SVG吧，全称可缩放矢量图形(Scalable Vector Graphics)，是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，是一种和图像分辨率无关的矢量图形格式。
接下来瞅瞅源代码吧：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>鲸鱼</title>
</head>
<style>
html,body {
height: 100%;
width: 100%;
margin: 0;
}
#whale {
height: 99.5%;
width: 100%;
}
</style>
<body>
<div id="whale"></div>
</body>
<script>
var whale = (function() {
var element = document.getElementById("whale"),
width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
fps = 30,
easy = 6,
maxspeed = 150,
delay = 15,
mouse = {
x: width / 2,
y: height / 2
},
defs, parts;
defs = '<defs><linearGradient gradientTransform="matrix(0 -2038 1116.5 0 -157 2622)" gradientUnits="userSpaceOnUse" id=":s6y" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(31,33,32)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(88,92,90)" stop-opacity="1.000"/>
(此处省略若干行.....)
<linearGradient gradientTransform="matrix(0 -230 639 0 -126 -470)" gradientUnits="userSpaceOnUse" id=":sbt" x1="-1" x2="1" y1="0" y2="0"><stop offset="0" stop-color="rgb(0,0,0)" stop-opacity="1.000"/><stop offset="0.8470588235294118" stop-color="rgb(20,22,21)" stop-opacity="1.000"/><stop offset="1" stop-color="rgb(33,35,33)" stop-opacity="1.000"/></linearGradient></defs>';
parts = [{
x: mouse.x,
y: mouse.y,
z: 43,
data: '<path d="M -3910 5327 Q -4485 5547 -4894 5547 Q -4901 5547 -4909 5547 L -4909 5547 Q -4756 5589 -4564 5590 Q -4293 5590 -4100 5506 Q -3927 5431 -3910 5327 Z M 3489 5312 Q 3494 5425 3681 5506 Q 3873 5590 4142 5590 Q 4394 5589 4579 5517 L 4579 5517 Q 4528 5535 4446 5535 Q 4159 5535 3489 5312 Z" fill="url(#:s98)"/><path d="M 4142 5017 Q 3873 5017 3681 5101 Q 3488 5185 3489 5304 L 3489 5312 Q 4159 5535 4446 5535 Q 4528 5535 4579 5517 L 4594 5511 L 4605 5506 Q 4797 5423 4797 5304 Q 4797 5185 4605 5101 Q 4413 5017 4142 5017 Z M -4564 5017 Q -4833 5017 -5025 5101 Q -5217 5185 -5217 5304 Q -5217 5423 -5025 5506 Q -4970 5530 -4909 5547 Q -4902 5547 -4894 5547 Q -4484 5547 -3910 5327 L -3908 5304 Q -3908 5185 -4100 5101 Q -4293 5017 -4564 5017 Z" fill="rgb(0,0,0)" fill-opacity="1.000"/>'
},
(此处省略若干行.....)
{
x: mouse.x,
y: mouse.y,
z: 0,
data: '<path d="M -63 -206 Q -430 -206 -765 -110 L -770 -18 Q -770 274 -580 482 Q -391 689 -125 689 Q 143 689 333 482 Q 522 277 522 -18 Q 522 -82 513 -142 Q 235 -206 -63 -206 Z" fill="url(#:sbs)"/><path d="M -125 -729 Q -394 -729 -580 -521 Q -740 -346 -765 -110 Q -430 -206 -63 -206 Q 235 -206 513 -142 Q 481 -358 333 -521 Q 143 -729 -125 -729 Z" fill="url(#:sbt)"/><path d="M 535 158 Q -69 23 -821 183" fill="none" stroke="rgb(188,188,188)" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1.000" stroke-width="63.481906870545906"/>'
}]
function init() {
document.addEventListener('mousemove', mousemove);
setInterval(loop, 1000 / fps);
}
function mousemove(e) {
mouse = {
x: e.clientX,
y: e.clientY
}
}
function loop() {
for (var i = 0; i < parts.length; i++) {
var params = {
mouse: mouse,
part: parts[i]
};
setTimeout(transform, parts[i].z * delay, params);
};
element.innerHTML = svg();
}
function svg() {
var svg = '<svg color-interpolation-filters="sRGB" style="fill-rule: evenodd; pointer-events: none; -moz-user-select: none; width: 100%; height: 100%;">';
for (var i = 0; i < parts.length; i++) {
svg += '<g transform="matrix(0.05 0 0 0.05 ' + parts[i].x + " " + parts[i].y + ')">';
svg += parts[i].data;
svg += '</g>';
};
svg += defs;
svg += '</svg>';
return svg;
}
function transform(params) {
params.part.x = definemaxspeed(params.mouse.x - params.part.x) / easy + params.part.x;
params.part.y = definemaxspeed(params.mouse.y - params.part.y) / easy + params.part.y;
}
function definemaxspeed(speed) {
if (speed > 0 && speed > maxspeed) return maxspeed;
if (speed < 0 && speed < -maxspeed) return -maxspeed;
return speed;
}
return {
init: init
};
})();
whale.init();
</script>
</html>
上面由于部分类似代码过多将其省略，省略的地方工作量还挺大。如果想要全部代码可以私聊哦~最后献上一张被玩坏的图：
发
一些地方，人们划着小船出海或潜水，总会不经意和海中的庞然大物不期而遇。
比如趴在海里想看个沙丁鱼风暴，却不经意被背后冲过来觅食的巨鲸吓个半死…..
没招谁惹谁，半道上突然就被比船还大的座头鲸封住了去路….
坐上橡皮艇想看看风景，却不小心进入了巨鲸的包围圈…..
看到近在咫尺的鲸鱼跃出水面，只能忙不迭地逃上冲浪板…..
类似遭遇鲸鱼的场景并不少见，以至于一直以来，人们都会好奇同样的问题：
鲸鱼这么大的块头，万一不留神把人给吞下去了咋办？
万一真的吞了下去，人还能活着出来吗？
最近，油管上一个大火起来的视频，系统地解答了这个困扰人类多年的谜题….
这个世界级奇葩问题——“鲸鱼吞人”，似乎自古以来就让人们无比好奇。
早在古代，就有许多出海碰见大型鱼类和鲸类的人们，也就有了无数“大鱼吞人”的传说。
《圣经》里面记载了约拿和鲸（或大鱼）的故事，讲的是约拿因不顺服先知，被鲸(或大鱼)吞下，之后他在鱼的肚子里生存了三天三夜后，被吐在了旱地上，最终死而复生（人们对此处有不同的解读）….
而到了1891年，一则新闻轰动了全世界，有一位名叫James Bartley的人，据说真的在鲸鱼的肚子里来了一次自助游，而后生还。
新闻报道颇有点恐怖片剧本的赶脚，据称，Bartley乘坐的轮船被一头巨大恐怖的抹香鲸袭击之后，Bartley不幸落水，之后这头抹香鲸张口血盆大口，直接将Bartley吞了下去。
直到第二天，Bartley的船员同事们再次追上了这头抹香鲸，他们将它杀死并带到了岸上，之后，船员们剖开抹香鲸的肚子，竟然在鲸的胃里发现了一息尚存的Bartley….
Bartley虽然失去了意识，但呼吸还在，他的脸和手臂被胃液漂得惨白，眼睛也瞎掉了，但幸运的是，他最终活了下来….
这则19世纪末刊载在美国报纸上的新闻，在当时引起了巨大的轰动，不少吃瓜群众信以为真，Bartley更是被当时的人们称为“现实版的约拿”，
另一方面，也有不少人对这篇报道的真实性提出了质疑，认为抹香鲸即便攻击人类船只，也不太可能主动吃人 …..
Bartley从鲸肚生还的故事就这样成为了半真半假的传闻，两个疑问依旧萦绕在不少人的心头：
人类真的会被鲸鱼吞下去吗？
万一被鲸鱼吞下，还有生还的可能吗？
随着科学技术的进步和人类对海洋生物研究的深入，“鲸鱼吞人”这个谜题的答案，也越来越明朗了。
谈到这个话题，首先就涉及到一个重要的前提：
什么样的鲸能生吞下一个人？
这不是开玩笑的。
虽然鲸类个头儿普遍比人类大N倍，但是能吞下整个人的鲸，掰着手指头都能数出来....
鲸类分为须鲸和齿鲸，属于须鲸亚目下面的鲸类，大多都是用鲸须过滤海水的方式捕捉一些小鱼小虾为食，因此它们食道普遍都很窄，从几厘米到十几厘米不等…..
直接拿须鲸类里面最大的蓝鲸来举例吧，蓝鲸是个不折不扣的巨无霸，它光是舌头就和一头大象差不多重，嘴巴里的空间更是大到吓人，光舌头上就能站40到50个成年人，蓝鲸不但是最大的鲸类，也是现存地球上最大的动物。
然而，这么庞大的一个动物，却根本吞不下一个人.....
因为，这个巨无霸虽然嘴大得吓人，它的食管却小得出奇，咽喉最大的地方直径也不过30厘米…..
如果人类不幸被一头蓝鲸吸进嘴里，这头巨兽只会和人类吞进一块大骨头的感觉差不多，为了不被卡到喉咙，会第一时间把人吐出来….
蓝鲸尚且如此，其他须鲸，如布氏鲸，长须鲸，座头鲸这些就更不用说了，它们无一例外都不能吞下一个人….
今年年初还刚刚出现了一个实例，2月份的时候，潜水员Rainer Schimpf在南非海岸附近潜水，
突然，他发现眼前一黑，整个人似乎被东西咬住了。他很快意识到，自己是被一头鲸给咬住了。
凭着对这一带鲸类的熟悉，他认为这头鲸绝不会吃掉自己，
因为不小心把他含进嘴里的，正是一头属于须鲸的布氏鲸….
后来接受采访时，Schimpf当时的内心活动是这样的：
“我屏住了呼吸，因为也做不了什么别的，要知道我可是在一个15吨重的大家伙嘴里….
我屏住呼吸是以为它会下潜到水里才把我放开。”
Rainer Schimpf
然而，出乎Schimpf的预料，这头不小心把他“吃”到嘴里的布氏鲸，很快就放开了他。
因为出于本能，Schimpf的块头对它来说也太大了，根本吃不下去….
接下来该说说齿鲸了，齿鲸大多有一口锋利的牙齿，以捕食海中大型鱼类和哺乳动物为生，
它们的喉头更大，吞咽能力更强，确实有吞下人类的能力。
然而，齿鲸里真正能吞人的鲸，依然屈指可数。
我们熟知的海中大熊猫，黑白萌物虎鲸就属于大型齿鲸类，然而这货以智商奇高，喜爱撸人闻名。
迄今为止没有出现过野生虎鲸袭击人的案例，虽然虎鲸属于凶猛的掠食动物，袭击大白鲨，捕食海豹，但也只是喜欢吃鲨鱼的肝脏，咬海豹的器官，
吞下一整个人，对它们来说，喉头同样不够大.....
假设虎鲸意外吞一个人，一来它们喉头不够大，二来它们能第一时间认出两脚兽，根本不会吃下去。
因此，虎鲸吞人，也是不可能的....
看起来，要满足意外吞下人类的鲸，必须是齿鲸，且块头要比虎鲸还大。
因此，排除其他可能的鲸之后，能吞下人类的鲸，似乎就只有最大的齿鲸——抹香鲸了….
抹香鲸
抹香鲸以深海鱿鱼（大王乌贼）为食，常出没于水下300米到1000米的地方，它们热衷吃掉巨大的猎物，不仅饭量大，食道足够粗，胃也够大。
可以说，要吞下一个人，抹香鲸是极少数合适的鲸选（？）
首先，抹香鲸能意外吞下人吗？
要知道，抹香鲸通常活跃在深海，只有换气的时候才会浮上水面，人类想要进入抹香鲸的肚子，必须抓住机会，瞅准了它突然张开的大嘴，准确地往里面一跳….
要顺利进入抹香鲸的肚子，也不是那么容易的事，首先要通过的，就是那几排尖利的牙齿….
抹香鲸的牙齿平均长20厘米，无比锋利，如果在抵达喉咙之前就被牙齿咬住，那么没等活着到达胃里，就已经GG了。
就算幸运地躲过了牙齿，被抹香鲸囫囵吞枣，进入了它的喉咙，也不意味着就能顺利活下来，
在这里，人会感到极度呼吸困难，不仅因为缺氧，还因为周遭充斥着大量的甲烷…..
接下来，就算侥幸没死，顺着抹香鲸的喉管下去，再抵达胃之前，用于消化的酸液已经开始侵蚀人的身体了，
首先被酸液腐蚀掉的，便是皮肤。
就算到了这时候，被吞下去的人依然还活着，接下来到达的也将是抹香鲸4个胃里的第一个，
如果这时候人还活着，或许还能看到一两个还没有被消化干净的深海发光生物体….
而这，也将是人最后生存的时刻，从那之后，人会被抹香鲸从第一个胃推向下一个胃，直到把人完全消化干净……
最后，这个意外被吞下的人，会随着抹香鲸体内的其他食物残渣一起，排出体外，成为大自然的一部分…..
因此，综上所述，“鲸吞人”这个话题讲到这里为止，答案再清楚不过了。
理论上，除了自己作死，抓住抹香鲸上浮的极小概率的机会，瞅准时机往它嘴里跳之外，人类意外被鲸吞下的可能性微乎其微....
如果不幸中了那万分之一的奖，被脾气不好的抹香鲸主动吞了下去，
结果就是，绝无生还的可能....
所以，好奇归好奇，“鲸肚子极限生存”的游戏，可以说是既没机会，又没必要了....
ref：https://www.youtube.com/watch?v=5JBMvUMJuyQhttps://www.livescience.com/64969-whale-almost-swallows-man.html
https://www.news24.com/MyNews24/Jonah-and-the-Whale-Intestines-20140610
--------------------------------------
GingerJuice好喝吗：真让鲸大吃一人
轻寒Qinghan:须鲸：不好意思，吞不下。 齿鲸-虎鲸：人宠好可爱，只想撸~ 齿鲸-抹香鲸：可以吞下，但是没必要~ 总之，人类不在鲸的食谱中，打扰了，告辞~
狐狸的肚皮毛茸茸：安心了（？
这个东西超难吃：虎鲸喜爱撸人这个可以详细讲讲嘛
昆仑山上的陆吾--CV祈陌：虎鲸很神奇的，智商超级高。然而对人类迷之友好。真的超级好那种，比如炫耀猎物，翻滚表演，秀牙齿，这些都属于虎鲸表达情绪的行为。反正如果在海里遇到虎鲸，完全不用怕，他们只会围着你游。不会伤害你，当然他们力气很大，有小家伙过来顶你出海面的话，你有可能被顶伤。
尸古未涵： ：“呸！”
绿色草原海：看动画片鲸鱼肚子里还有蜡烛啥的
陆窈阿窈阿窈不爱吃猪蹄：小时候看动画片，以为人会在喷水的时候被喷出来
…………………………
事儿君有品，
专为大家准备英国的各种值得推荐的好产品~
英国直邮
包邮包税
*请认真填写需求信息，我们会在24小时内与您取得联系。
