6款网页表白代码6(附带源码)

2024-05-24 00:52

本文主要是介绍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;}

领取源码

6款网页表白代码6领取地址:https://www.123pan.com/s/ji8kjv-0RPU3.html提取码:关注微信公众号祖龙科技工作室回复表白代码6即可获取


下期更新预报

高仿百度网站html源码

  • 📢博客主页:孤客网络科技工作室官方账号
  • 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正!
  • 📢本文由孤客原创,若侵权联系作者,首发于CSDN博客
  • 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻

这篇关于6款网页表白代码6(附带源码)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/996912

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

Java ArrayList扩容机制 (源码解读)

结论:初始长度为10,若所需长度小于1.5倍原长度,则按照1.5倍扩容。若不够用则按照所需长度扩容。 一. 明确类内部重要变量含义         1:数组默认长度         2:这是一个共享的空数组实例,用于明确创建长度为0时的ArrayList ,比如通过 new ArrayList<>(0),ArrayList 内部的数组 elementData 会指向这个 EMPTY_EL

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时,发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null,再判断Count。 看了一下Count的源码如下: 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

工厂ERP管理系统实现源码(JAVA)

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本,并实时掌握各环节的运营状况。 在采购管理方面,系统能够处理采购订单、供应商管理和采购入库等流程,确保采购过程的透明和高效。仓库管理方面,实现库存的精准管理,包括入库、出库、盘点等操作,确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip