1. 首页
  2. IT资讯

HTML制作跟随鼠标的可爱萌鲸鱼,快来看看吧~

“u003Cdivu003Eu003Cpu003E今天接着来给大家分享一个非常好玩的小动画,是在HTML5实训中了解到并学习到的。它是一只可爱的鲸鱼,会随着鼠标的移动而移动,鼻尖会跟随着鼠标。u003Cu002Fpu003Eu003Cpu003E先来张萌图:u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F10660000edf5bf17b123″ img_width=”872″ img_height=”522″ alt=”HTML制作跟随鼠标的可爱萌鲸鱼,快来看看吧~” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E我们先来看看动画的效果:u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F1022000513158d2d4a03″ img_width=”582″ img_height=”331″ alt=”HTML制作跟随鼠标的可爱萌鲸鱼,快来看看吧~” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E这个有趣的案例使用了SVG的<defs>元素,它用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组,并用<defs>元素来定义它,然后你就可以在SVG图像中将它当做简单图形来重复使用。u003Cu002Fpu003Eu003Cpu003E简单说下SVG吧,全称可缩放矢量图形(Scalable Vector Graphics),是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,是一种和图像分辨率无关的矢量图形格式。u003Cu002Fpu003Eu003Cpu003E接下来瞅瞅源代码吧:u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003E<!doctype html>u003Cu002Fpu003Eu003Cpu003E<html>u003Cu002Fpu003Eu003Cpu003E<head>u003Cu002Fpu003Eu003Cpu003E<meta charset=”utf-8″u002F>u003Cu002Fpu003Eu003Cpu003E<title>鲸鱼<u002Ftitle>u003Cu002Fpu003Eu003Cpu003E<u002Fhead>u003Cu002Fpu003Eu003Cpu003E<style>u003Cu002Fpu003Eu003Cpu003Ehtml,body {u003Cu002Fpu003Eu003Cpu003Eheight: 100%;u003Cu002Fpu003Eu003Cpu003Ewidth: 100%;u003Cu002Fpu003Eu003Cpu003Emargin: 0;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E#whale {u003Cu002Fpu003Eu003Cpu003Eheight: 99.5%;u003Cu002Fpu003Eu003Cpu003Ewidth: 100%;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E<u002Fstyle>u003Cu002Fpu003Eu003Cpu003E<body>u003Cu002Fpu003Eu003Cpu003E<div id=”whale”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fbody>u003Cu002Fpu003Eu003Cpu003E<script>u003Cu002Fpu003Eu003Cpu003Evar whale = (function() {u003Cu002Fpu003Eu003Cpu003Evar element = document.getElementById(“whale”),u003Cu002Fpu003Eu003Cpu003Ewidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,u003Cu002Fpu003Eu003Cpu003Eheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,u003Cu002Fpu003Eu003Cpu003Efps = 30,u003Cu002Fpu003Eu003Cpu003Eeasy = 6,u003Cu002Fpu003Eu003Cpu003Emaxspeed = 150,u003Cu002Fpu003Eu003Cpu003Edelay = 15,u003Cu002Fpu003Eu003Cpu003Emouse = {u003Cu002Fpu003Eu003Cpu003Ex: width u002F 2,u003Cu002Fpu003Eu003Cpu003Ey: height u002F 2u003Cu002Fpu003Eu003Cpu003E},u003Cu002Fpu003Eu003Cpu003Edefs, parts;u003Cu002Fpu003Eu003Cpu003Edefs = ‘<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″u002F><stop offset=”0.8470588235294118″ stop-color=”rgb(31,33,32)” stop-opacity=”1.000″u002F><stop offset=”1″ stop-color=”rgb(88,92,90)” stop-opacity=”1.000″u002F>u003Cu002Fpu003Eu003Cpu003E(此处省略若干行…..)u003Cu002Fpu003Eu003Cpu003E<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″u002F><stop offset=”0.8470588235294118″ stop-color=”rgb(20,22,21)” stop-opacity=”1.000″u002F><stop offset=”1″ stop-color=”rgb(33,35,33)” stop-opacity=”1.000″u002F><u002FlinearGradient><u002Fdefs>’;u003Cu002Fpu003Eu003Cpu003Eparts = [{u003Cu002Fpu003Eu003Cpu003Ex: mouse.x,u003Cu002Fpu003Eu003Cpu003Ey: mouse.y,u003Cu002Fpu003Eu003Cpu003Ez: 43,u003Cu002Fpu003Eu003Cpu003Edata: ‘<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)”u002F><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″u002F>’u003Cu002Fpu003Eu003Cpu003E},u003Cu002Fpu003Eu003Cpu003E(此处省略若干行…..)u003Cu002Fpu003Eu003Cpu003E{u003Cu002Fpu003Eu003Cpu003Ex: mouse.x,u003Cu002Fpu003Eu003Cpu003Ey: mouse.y,u003Cu002Fpu003Eu003Cpu003Ez: 0,u003Cu002Fpu003Eu003Cpu003Edata: ‘<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)”u002F><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)”u002F><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″u002F>’u003Cu002Fpu003Eu003Cpu003E}]u003Cu002Fpu003Eu003Cpu003Efunction init() {u003Cu002Fpu003Eu003Cpu003Edocument.addEventListener(‘mousemove’, mousemove);u003Cu002Fpu003Eu003Cpu003EsetInterval(loop, 1000 u002F fps);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Efunction mousemove(e) {u003Cu002Fpu003Eu003Cpu003Emouse = {u003Cu002Fpu003Eu003Cpu003Ex: e.clientX,u003Cu002Fpu003Eu003Cpu003Ey: e.clientYu003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Efunction loop() {u003Cu002Fpu003Eu003Cpu003Efor (var i = 0; i < parts.length; i++) {u003Cu002Fpu003Eu003Cpu003Evar params = {u003Cu002Fpu003Eu003Cpu003Emouse: mouse,u003Cu002Fpu003Eu003Cpu003Epart: parts[i]u003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003EsetTimeout(transform, parts[i].z * delay, params);u003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003Eelement.innerHTML = svg();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Efunction svg() {u003Cu002Fpu003Eu003Cpu003Evar svg = ‘<svg color-interpolation-filters=”sRGB” style=”fill-rule: evenodd; pointer-events: none; -moz-user-select: none; width: 100%; height: 100%;”>’;u003Cu002Fpu003Eu003Cpu003Efor (var i = 0; i < parts.length; i++) {u003Cu002Fpu003Eu003Cpu003Esvg += ‘<g transform=”matrix(0.05 0 0 0.05 ‘ + parts[i].x + ” ” + parts[i].y + ‘)”>’;u003Cu002Fpu003Eu003Cpu003Esvg += parts[i].data;u003Cu002Fpu003Eu003Cpu003Esvg += ‘<u002Fg>’;u003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003Esvg += defs;u003Cu002Fpu003Eu003Cpu003Esvg += ‘<u002Fsvg>’;u003Cu002Fpu003Eu003Cpu003Ereturn svg;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Efunction transform(params) {u003Cu002Fpu003Eu003Cpu003Eparams.part.x = definemaxspeed(params.mouse.x – params.part.x) u002F easy + params.part.x;u003Cu002Fpu003Eu003Cpu003Eparams.part.y = definemaxspeed(params.mouse.y – params.part.y) u002F easy + params.part.y;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Efunction definemaxspeed(speed) {u003Cu002Fpu003Eu003Cpu003Eif (speed > 0 && speed > maxspeed) return maxspeed;u003Cu002Fpu003Eu003Cpu003Eif (speed < 0 && speed < -maxspeed) return -maxspeed;u003Cu002Fpu003Eu003Cpu003Ereturn speed;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Ereturn {u003Cu002Fpu003Eu003Cpu003Einit: initu003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003E})();u003Cu002Fpu003Eu003Cpu003Ewhale.init();u003Cu002Fpu003Eu003Cpu003E<u002Fscript>u003Cu002Fpu003Eu003Cpu003E<u002Fhtml>u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E上面由于部分类似代码过多将其省略,省略的地方工作量还挺大。如果想要全部代码可以私聊哦~最后献上一张被玩坏的图:u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F10680000ef101ab7292f” img_width=”582″ img_height=”331″ alt=”HTML制作跟随鼠标的可爱萌鲸鱼,快来看看吧~” inline=”0″u003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:HTML制作跟随鼠标的可爱萌鲸鱼,快来看看吧~

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/10872.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code