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.msRequestAnimationFrame
const FRAME_RATE = 60
const PARTICLE_NUM = 2000
const RADIUS = Math.PI * 2
const CANVASWIDTH = 500
const CANVASHEIGHT = 150
const 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 = 70
function 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)) * 4
if (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;
}
领取源码
6款网页表白代码6领取地址：https://www.123pan.com/s/ji8kjv-0RPU3.html提取码:关注微信公众号祖龙科技工作室回复表白代码6即可获取
下期更新预报
高仿百度网站html源码
- 📢博客主页：孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
- 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻
