整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天接著來給大家分享一個非常好玩的小動畫，是在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小時內與您取得聯系。
