用自己的电脑做服务器搭建网站,无锡建网站价格,小型电商平台,西安网站开发制作目录
前言
HTML部分
CSS部分
JS部分
效果图
总结 前言 无需多言#xff0c;本文将详细介绍一段HTML代码#xff0c;图中线条可跟随鼠标移动#xff0c;具体内容如下#xff1a; 开始 首先新建一个HTML的文本#xff0c;文本名改为[index.html]#xff0c;创建好后右… 目录
前言
HTML部分
CSS部分
JS部分
效果图
总结 前言 无需多言本文将详细介绍一段HTML代码图中线条可跟随鼠标移动具体内容如下 开始 首先新建一个HTML的文本文本名改为[index.html]创建好后右键用文本文档打开再把下面相对应代码填入后保存即可。文本名主要是改后缀
HTML部分 下面代码是一个完整的HTML页面包含了HTML、CSS和JavaScript。首先先对代码各个方面进行分析
HTML部分
!DOCTYPE html声明了文档类型和HTML版本这里是XHTML 1.0 Transitional它允许使用一些不严格的标签。html标签定义了整个页面的内容xmlns属性指定了命名空间通常用于XML文档。head部分包含了文档的元数据如meta标签定义了字符集为UTF-8title定义了页面标题。body标签内包含了页面的所有内容如文本、图片、视频等。
CSS部分
使用了内联style标签定义了页面的样式。有一个重置样式* { margin: 0; padding: 0; ... }这用于统一不同浏览器的默认样式。定义了一些动画和过渡效果如h1, h2的字母逐渐显示效果。页面背景、文字样式、链接样式等都通过CSS进行了定义。
JavaScript部分
定义了一个Stats函数用于显示页面的帧率(FPS)和毫秒数(MS)。定义了Oscillator和Tendril类这些类用于生成页面上的动态效果。使用了requestAnimFrame来创建平滑的动画循环。通过mousemove、touchstart等事件监听器来响应用户的交互。有一个letters函数用于将标题中的每个字母分开并添加动画效果。有一个save函数可能用于保存页面的当前状态为图片。
其他注意事项
canvas元素被用于绘制动态图形。页面中有一些用于调试的代码如settings.debug true;这可能在开发过程中有用但在生产环境中应该被移除或设置为false。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title丝滑/titlestyle typetext/css * {margin: 0; padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;
}
html, body {margin: 0;padding: 0;font: 16px/1.4 Lato, sans-serif;color: #fefeff;-webkit-font-smoothing: antialiased;font-smoothing: antialiased;
}
body {background: rgb(8,5,16);overflow:hidden;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}h1 {font: 2.75em Cinzel, serif;font-weight: 400;letter-spacing: 0.35em;text-shadow: 0 0 25px rgba(254,254,255,0.85);
}
h2 {font: 1.45em Cinzel, serif;font-weight: 400;letter-spacing: 0.5em;text-shadow: 0 0 25px rgba(254,254,255,0.85);text-transform: lowercase;
}[class^letter] {-webkit-transition: opacity 3s ease;-moz-transition: opacity 3s ease;transition: opacity 3s ease;
}
.letter-0 { transition-delay: 0.2s; }
.letter-1 { transition-delay: 0.4s; }
.letter-2 { transition-delay: 0.6s; }
.letter-3 { transition-delay: 0.8s; }
.letter-4 { transition-delay: 1.0s; }
.letter-5 { transition-delay: 1.2s; }
.letter-6 { transition-delay: 1.4s; }
.letter-7 { transition-delay: 1.6s; }
.letter-8 { transition-delay: 1.8s; }
.letter-9 { transition-delay: 2.0s; }
.letter-10 { transition-delay: 2.2s; }
.letter-11 { transition-delay: 2.4s; }
.letter-12 { transition-delay: 2.6s; }
.letter-13 { transition-delay: 2.8s; }
.letter-14 { transition-delay: 3.0s; }h1, h2 {visibility: hidden;-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
}
h1.transition-in,
h2.transition-in {visibility: visible;
}
h1 [class^letter],
h2 [class^letter] {opacity: 0;
}
h1.transition-in [class^letter],
h2.transition-in [class^letter] {opacity: 1;
}#container {
display: table;
position: absolute;
z-index: 20;
width: 100%;
height: 100%;
text-align: center;
cursor: none;
left: 15px;
}
#container div {display: table-cell;vertical-align: middle;
}
#container p {position: absolute;width: 100%;left: 0;bottom: 25px;font-size: 0.8em;letter-spacing: 0.1em;font-weight: 300;color: #76747a;-webkit-font-smoothing: subpixel-antialiased;font-smoothing: subpixel-antialiased;
}
#container p strong {
color: #b3abc5;
font-size: 5em;
}
#container p span {font-size: 0.75em;padding: 0 2px;
}#canvas {position: absolute;z-index: 10;top: 0;left: 0;width: 100%;height: 100%;cursor: none;
}#stats { position: absolute; z-index: 10; left: 10px; top: 10px;
}.dg.ac {z-index: 100 !important;
}#container div p strong a {
color: #999;
font-size: 0.5em;
}
body,td,th {
font-family: Lato, sans-serif;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
/style
/head
body ondragstartwindow.event.returnValuefalse oncontextmenuwindow.event.returnValuefalse onselectstartevent.returnValuefalsediv idcontainerdivh1 idh1HTML讨论群计算机考证讨论群请加QQ群/h1h2 idh2757183195428886795/h2h3 idh2雷神 Leo/h3pnbsp;/ppstronga hrefhttps://gxguizhiyuan.com/volunteer-pc/#/home/team/info/824313033?isAdd1简介/a/strong/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/ppnbsp;/p/div/divcanvas idcanvas/canvasaudio autoplayautoplaysource srchttp://www.ntzyw.cn typeaudio/oggsource srchttp://p2014.yaotou.com:8081/2014%2F2014-4%2F2014-4-20%2F2014420203237.m4a typeaudio/mpeg
/audioscript
var Statsfunction(){var eDate.now(),te,i0,n1/0,r0,s0,o1/0,a0,l0,h0,cdocument.createElement(div);c.idstats,c.addEventListener(mousedown,function(e){e.preventDefault(),v(h%2)},!1),c.style.cssTextwidth:80px;opacity:0.9;cursor:pointer;var udocument.createElement(div);u.idfps,u.style.cssTextpadding:0 0 3px 3px;text-align:left;background-color:#002,c.appendChild(u);var ddocument.createElement(div);d.idfpsText,d.style.cssTextcolor:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px,d.innerHTMLFPS,u.appendChild(d);var pdocument.createElement(div);for(p.idfpsGraph,p.style.cssTextposition:relative;width:74px;height:30px;background-color:#0ff,u.appendChild(p);74p.children.length;){var fdocument.createElement(span);f.style.cssTextwidth:1px;height:30px;float:left;background-color:#113,p.appendChild(f)}var mdocument.createElement(div);m.idms,m.style.cssTextpadding:0 0 3px 3px;text-align:left;background-color:#020;display:none,c.appendChild(m);var gdocument.createElement(div);g.idmsText,g.style.cssTextcolor:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px,g.innerHTMLMS,m.appendChild(g);var ydocument.createElement(div);for(y.idmsGraph,y.style.cssTextposition:relative;width:74px;height:30px;background-color:#0f0,m.appendChild(y);74y.children.length;){var fdocument.createElement(span);f.style.cssTextwidth:1px;height:30px;float:left;background-color:#131,y.appendChild(f)}var vfunction(e){switch(he){case 0:u.style.displayblock,m.style.displaynone;break;case 1:u.style.displaynone,m.style.displayblock}},bfunction(e,t){var ie.appendChild(e.firstChild);i.style.heighttpx};return{REVISION:11,domElement:c,setMode:v,begin:function(){eDate.now()},end:function(){var hDate.now();return ih-e,nMath.min(n,i),rMath.max(r,i),g.textContenti MS (n-r),b(y,Math.min(30,30-30*(i/200))),l,ht1e3(sMath.round(1e3*l/(h-t)),oMath.min(o,s),aMath.max(a,s),d.textContents FPS (o-a),b(p,Math.min(30,30-30*(s/100))),th,l0),h},update:function(){ethis.end()}}};
/script
script;(function(window) {var ctx,hue,logo,form,buffer,target {},tendrils [],settings {};settings.debug true;
settings.friction 0.5;
settings.trails 20;
settings.size 50;
settings.dampening 0.25;
settings.tension 0.98;Math.TWO_PI Math.PI * 2;//
// Oscillator
// ----------------------------------------------------------------------------------------function Oscillator(options) {this.init(options || {});
}Oscillator.prototype (function() {var value 0;return {init: function(options) {this.phase options.phase || 0;this.offset options.offset || 0;this.frequency options.frequency || 0.001;this.amplitude options.amplitude || 1;},update: function() {this.phase this.frequency;value this.offset Math.sin(this.phase) * this.amplitude;return value;},value: function() {return value;}};})();//
// Tendril
// ----------------------------------------------------------------------------------------function Tendril(options) {this.init(options || {});
}Tendril.prototype (function() {function Node() {this.x 0;this.y 0;this.vy 0;this.vx 0;}return {init: function(options) {this.spring options.spring (Math.random() * 0.1) - 0.05; this.friction settings.friction (Math.random() * 0.01) - 0.005;this.nodes [];for(var i 0, node; i settings.size; i) {node new Node();node.x target.x;node.y target.y;this.nodes.push(node);} },update: function() {var spring this.spring,node this.nodes[0];node.vx (target.x - node.x) * spring;node.vy (target.y - node.y) * spring;for(var prev, i 0, n this.nodes.length; i n; i) {node this.nodes[i];if(i 0) {prev this.nodes[i - 1];node.vx (prev.x - node.x) * spring;node.vy (prev.y - node.y) * spring;node.vx prev.vx * settings.dampening;node.vy prev.vy * settings.dampening;}node.vx * this.friction;node.vy * this.friction;node.x node.vx;node.y node.vy;spring * settings.tension;}},draw: function() {var x this.nodes[0].x, y this.nodes[0].y,a, b;ctx.beginPath();ctx.moveTo(x, y);for(var i 1, n this.nodes.length - 2; i n; i) {a this.nodes[i];b this.nodes[i 1];x (a.x b.x) * 0.5;y (a.y b.y) * 0.5;ctx.quadraticCurveTo(a.x, a.y, x, y);}a this.nodes[i];b this.nodes[i 1];ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);ctx.stroke();ctx.closePath();}};})();// ----------------------------------------------------------------------------------------function init(event) {document.removeEventListener(mousemove, init);document.removeEventListener(touchstart, init);document.addEventListener(mousemove, mousemove);document.addEventListener(touchmove, mousemove);document.addEventListener(touchstart, touchstart);mousemove(event);reset();loop();
}function reset() {tendrils [];for(var i 0; i settings.trails; i) {tendrils.push(new Tendril({spring: 0.45 0.025 * (i / settings.trails)}));}
}function loop() {if(!ctx.running) return;ctx.globalCompositeOperation source-over;ctx.fillStyle rgba(8,5,16,0.4);ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);ctx.globalCompositeOperation lighter;ctx.strokeStyle hsla( Math.round(hue.update()) ,90%,50%,0.25);ctx.lineWidth 1;if(ctx.frame % 60 0) {console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);}for(var i 0, tendril; i settings.trails; i) {tendril tendrils[i];tendril.update();tendril.draw();}ctx.frame;ctx.stats.update();requestAnimFrame(loop);
}function resize() {ctx.canvas.width window.innerWidth;ctx.canvas.height window.innerHeight;
}function start() {if(!ctx.running) {ctx.running true;loop();}
}function stop() {ctx.running false;
}function mousemove(event) {if(event.touches) {target.x event.touches[0].pageX;target.y event.touches[0].pageY;} else {target.x event.clientXtarget.y event.clientY;}event.preventDefault();
}function touchstart(event) {if(event.touches.length 1) {target.x event.touches[0].pageX;target.y event.touches[0].pageY;}
}function keyup(event) {switch(event.keyCode) {case 32:save();break;default: // console.log(event.keyCode);}
}function letters(id) {var el document.getElementById(id),letters el.innerHTML.replace(amp;, ).split(),heading ;for(var i 0, n letters.length, letter; i n; i) {letter letters[i].replace(, amp);heading letter.trim() ? span classletter- i letter /span : nbsp;;}el.innerHTML heading;setTimeout(function() { el.className transition-in; }, (Math.random() * 500) 500);
}function save() {if(!buffer) {buffer document.createElement(canvas);buffer.width screen.availWidth;buffer.height screen.availHeight;buffer.ctx buffer.getContext(2d);form document.createElement(form);form.method post;form.input document.createElement(input);form.input.type hidden;form.input.name data;form.appendChild(form.input);document.body.appendChild(form);}buffer.ctx.fillStyle rgba(8,5,16);buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);buffer.ctx.drawImage(canvas,Math.round(buffer.width / 2 - canvas.width / 2), Math.round(buffer.height / 2 - canvas.height / 2));buffer.ctx.drawImage(logo,Math.round(buffer.width / 2 - logo.width / 4), Math.round(buffer.height / 2 - logo.height / 4),logo.width / 2,logo.height / 2);window.open(buffer.toDataURL(), wallpaper, top0,left0,width buffer.width ,height buffer.height);// form.input.value buffer.toDataURL().substr(22);// form.submit();
}window.requestAnimFrame (function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) { window.setTimeout(fn, 1000 / 60) };
})();window.onload function() {ctx document.getElementById(canvas).getContext(2d);ctx.stats new Stats();ctx.running true;ctx.frame 1;logo new Image();logo.src http://labs.nikrowell.com/lightsandmotion/ultraviolet/images/logo.png;hue new Oscillator({phase: Math.random() * Math.TWO_PI,amplitude: 85,frequency: 0.0015,offset: 285});letters(h1);letters(h2);document.addEventListener(mousemove, init);document.addEventListener(touchstart, init);document.body.addEventListener(orientationchange, resize);window.addEventListener(resize, resize);window.addEventListener(keyup, keyup);window.addEventListener(focus, start);window.addEventListener(blur, stop);resize();if(window.DEBUG) {var gui new dat.GUI();// gui.add(settings, debug);settings.gui.add(settings, trails, 1, 30).onChange(reset);settings.gui.add(settings, size, 25, 75).onFinishChange(reset);settings.gui.add(settings, friction, 0.45, 0.55).onFinishChange(reset);settings.gui.add(settings, dampening, 0.01, 0.4).onFinishChange(reset);settings.gui.add(settings, tension, 0.95, 0.999).onFinishChange(reset); document.body.appendChild(ctx.stats.domElement);}
};})(window);/script/body
/html效果图
具体可以上手体验十分简单只要会复制粘贴改后缀就行。 总结 这段代码是一个交互式网页的示例它利用HTML定义了页面结构CSS负责页面的样式设计包括动画和过渡效果以及一个重置样式来统一不同浏览器的默认样式。JavaScript部分实现了动态效果包括一个自定义的Stats函数来显示性能指标以及Oscillator和Tendril类来创建视觉效果。此外通过监听用户的鼠标和触摸动作页面能够响应交互。代码中还包含了一些可能用于调试目的的设置以及一些可能存在问题或需要优化的资源链接。整体而言该页面通过结合前端技术提供了视觉动画和用户交互的体验。
