6款网页表白代码6（附带源码）

6款网页表白代码6

前言
效果图及部分源码
- 1.爱心倒计时
- 2.一起看星星
- 3.爱心
- 4.爱心（有鼠标移动特效）
- 5.爱心（高级效果）
- 6.爱心（3D效果）
领取源码
下期更新预报

前言

大部分人都有喜欢的人，学会这些表白代码，下次表白你肯定会成功。希望你有个女朋友

效果图及部分源码

1.爱心倒计时

在这里插入图片描述
部分代码

function Vector(a, b) {this.x = a;this.y = b
}Vector.prototype = {rotate: function (b) {var a = this.x;var c = this.y;this.x = Math.cos(b) * a - Math.sin(b) * c;this.y = Math.sin(b) * a + Math.cos(b) * c;return this}, mult: function (a) {this.x *= a;this.y *= a;return this}, clone: function () {return new Vector(this.x, this.y)}, length: function () {return Math.sqrt(this.x * this.x + this.y * this.y)}, subtract: function (a) {this.x -= a.x;this.y -= a.y;return this}, set: function (a, b) {this.x = a;this.y = b;return this}
}

2.一起看星星

在这里插入图片描述

部分代码

;(function (window) {window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame || window.msRequestAnimationFrameconst FRAME_RATE = 60const PARTICLE_NUM = 2000const RADIUS = Math.PI * 2const CANVASWIDTH = 500const CANVASHEIGHT = 150const CANVASID = 'canvas'let texts = ['MY DEAR', 'LOOK UP AT THE', 'STARRY SKY', 'ARE YOU', 'LOOKING AT THE', 'SAME STAR', 'WITH ME ?', 'I', 'MUST', 'FORGET', 'YOU', 'I HATE YOU']let canvas,ctx,particles = [],quiver = true,text = texts[0],textIndex = 0,textSize = 70function draw () {ctx.clearRect(0, 0, CANVASWIDTH, CANVASHEIGHT)ctx.fillStyle = 'rgb(255, 255, 255)'ctx.textBaseline = 'middle'ctx.fontWeight = 'bold'ctx.font = textSize + 'px \'SimHei\', \'Avenir\', \'Helvetica Neue\', \'Arial\', \'sans-serif\''ctx.fillText(text, (CANVASWIDTH - ctx.measureText(text).width) * 0.5, CANVASHEIGHT * 0.5)let imgData = ctx.getImageData(0, 0, CANVASWIDTH, CANVASHEIGHT)ctx.clearRect(0, 0, CANVASWIDTH, CANVASHEIGHT)for (let i = 0, l = particles.length; i < l; i++) {let p = particles[i]p.inText = false}particleText(imgData)window.requestAnimationFrame(draw)}function particleText (imgData) {// 点坐标获取var pxls = []for (var w = CANVASWIDTH; w > 0; w -= 3) {for (var h = 0; h < CANVASHEIGHT; h += 3) {var index = (w + h * (CANVASWIDTH)) * 4if (imgData.data[index] > 1) {pxls.push([w, h])}}}

3.爱心

在这里插入图片描述
部分代码

body {background: #000;overflow: hidden;margin: 0;
}

4.爱心（有鼠标移动特效）

在这里插入图片描述
部分源码

<style type="text/css">html, body {height: 100%;padding: 0;margin: 0;background: #000;}canvas {position: absolute;width: 100%;height: 100%;}.namebox{color: #fff;position: absolute;   top: 50%;   left: 50%;   -webkit-transform: translate(-50%, -50%);   -moz-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);   -o-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);   }.namebox h1{margin: 0 auto;}</style>

5.爱心（高级效果）

在这里插入图片描述

部分源码

<script>window.requestAnimationFrame =window.__requestAnimationFrame ||window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||(function () {return function (callback, element) {var lastTime = element.__lastTime;if (lastTime === undefined) {lastTime = 0;}var currTime = Date.now();var timeToCall = Math.max(1, 33 - (currTime - lastTime));window.setTimeout(callback, timeToCall);element.__lastTime = currTime + timeToCall;};})();window.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));var loaded = false;var init = function () {if (loaded) return;loaded = true;var mobile = window.isDevice;var koef = mobile ? 0.5 : 1;var canvas = document.getElementById('heart');var ctx = canvas.getContext('2d');var width = canvas.width = koef * innerWidth;var height = canvas.height = koef * innerHeight;var rand = Math.random;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);var heartPosition = function (rad) {//return [Math.sin(rad), Math.cos(rad)];return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];};var scaleAndTranslate = function (pos, sx, sy, dx, dy) {return [dx + pos[0] * sx, dy + pos[1] * sy];};window.addEventListener('resize', function () {width = canvas.width = koef * innerWidth;height = canvas.height = koef * innerHeight;ctx.fillStyle = "rgba(0,0,0,1)";ctx.fillRect(0, 0, width, height);});var traceCount = mobile ? 20 : 50;var pointsOrigin = [];var i;var dr = mobile ? 0.3 : 0.1;for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));var heartPointsCount = pointsOrigin.length;var targetPoints = [];var pulse = function (kx, ky) {for (i = 0; i < pointsOrigin.length; i++) {targetPoints[i] = [];targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;}};

6.爱心（3D效果）

在这里插入图片描述

部分源码

(function () {const _face = new THREE.Triangle();const _color = new THREE.Vector3();class MeshSurfaceSampler {constructor(mesh) {let geometry = mesh.geometry;if (!geometry.isBufferGeometry || geometry.attributes.position.itemSize !== 3) {throw new Error('THREE.MeshSurfaceSampler: Requires BufferGeometry triangle mesh.');}if (geometry.index) {console.warn('THREE.MeshSurfaceSampler: Converting geometry to non-indexed BufferGeometry.');geometry = geometry.toNonIndexed();}this.geometry = geometry;this.randomFunction = Math.random;this.positionAttribute = this.geometry.getAttribute('position');this.colorAttribute = this.geometry.getAttribute('color');this.weightAttribute = null;this.distribution = null;}setWeightAttribute(name) {this.weightAttribute = name ? this.geometry.getAttribute(name) : null;return this;}build() {const positionAttribute = this.positionAttribute;const weightAttribute = this.weightAttribute;const faceWeights = new Float32Array(positionAttribute.count / 3); // Accumulate weights for each mesh face.for (let i = 0; i < positionAttribute.count; i += 3) {let faceWeight = 1;if (weightAttribute) {faceWeight = weightAttribute.getX(i) + weightAttribute.getX(i + 1) + weightAttribute.getX(i + 2);}_face.a.fromBufferAttribute(positionAttribute, i);_face.b.fromBufferAttribute(positionAttribute, i + 1);_face.c.fromBufferAttribute(positionAttribute, i + 2);faceWeight *= _face.getArea();faceWeights[i / 3] = faceWeight;}