1200字范文 > 情人节程序员用HTML网页表白【浪漫爱心旋转】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

情人节程序员用HTML网页表白【浪漫爱心旋转】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

时间：2021-03-19 10:21:51

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

文章目录

一、网页介绍一、网页效果二、代码展示1.HTML代码三、精彩专栏

一、网页介绍

1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html><html lang="en"><head><title>three.js canvas - particles with shapes</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {font-family: Monospace;background-color: #f0f0f0;margin: 0px;overflow: hidden;}</style></head><body><script type="text/javascript" src="js/nb.js"></script><script type="text/javascript" src="js/Projector.js"></script><script type="text/javascript" src="js/CanvasRenderer.js"></script><script type="text/javascript" src="js/tween.min.js"></script><script type="text/javascript" src="js/Sparks.js"></script><script type="text/javascript" src="js/helvetiker_regular.typeface.js"></script><script type="text/javascript">var container;var camera, scene, renderer;var group, text, plane;var targetRotation = 0;var targetRotationOnMouseDown = 0;var mouseX = 0;var mouseXOnMouseDown = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var heartShape, particleCloud, sparksEmitter, emitterPos;var _rotation = 0;var timeOnShapePath = 0;init();animate();function init() {container = document.createElement( 'div' );document.body.appendChild( container );//相机camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000);camera.position.set( 0, 150, 800 );//场景scene = new THREE.Scene();group = new THREE.Group();scene.add( group );// Get text from hashvar string = "LOVE U";var hash = document.location.hash.substr( 1 );if ( hash.length !== 0 ) {string = hash;}var text3d = new THREE.TextGeometry( string, {size: 80,height: 20,curveSegments: 2,font: "helvetiker"});puteBoundingBox();var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );var textMaterial = new THREE.MeshBasicMaterial( {color: Math.random() * 0xffffff, overdraw: 0.5 } );text = new THREE.Mesh( text3d, textMaterial );// Potentially, we can extract the vertices or faces of the text to generate particles too.// Geo > Vertices > Positiontext.position.x = centerOffset;text.position.y = 100;text.position.z = 0;text.rotation.x = 0;text.rotation.y = Math.PI * 2;group.add( text );particleCloud = new THREE.Object3D(); // Just a groupparticleCloud.y = 800;group.add( particleCloud );// Create Particle Systems// Heartvar x = 0, y = 0;heartShape = new THREE.Shape();heartShape.moveTo( x + 25, y + 25 );heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35,x - 30,y + 35 );heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );var hue = 0;var hearts = function ( context ) {context.globalAlpha = 0.5;var x = 0, y = 0;context.scale(0.05, -0.05); // Scale so canvas render can redraw within boundscontext.beginPath();// From /html5/130-pathscontext.bezierCurveTo( x + 2.5, y + 2.5, x + 2.0, y, x, y );context.bezierCurveTo( x - 3.0, y, x - 3.0, y + 3.5,x - 3.0,y + 3.5 );context.bezierCurveTo( x - 3.0, y + 5.5, x - 1.0, y + 7.7, x + 2.5, y + 9.5 );context.bezierCurveTo( x + 6.0, y + 7.7, x + 8.0, y + 5.5, x + 8.0, y + 3.5 );context.bezierCurveTo( x + 8.0, y + 3.5, x + 8.0, y, x + 5.0, y );context.bezierCurveTo( x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5 );context.fill();context.lineWidth = 0.5; //0.05context.stroke();}var setTargetParticle = function() {var material = new THREE.SpriteCanvasMaterial( {program: hearts} );material.color.setHSL(hue, 1, 0.75);hue += 0.001;if (hue>1) hue-=1;particle = new THREE.Sprite( material );particle.scale.x = particle.scale.y = Math.random() * 40 + 40;particleCloud.add( particle );return particle;};var onParticleCreated = function( p ) {p.target.position.copy( p.position );};var onParticleDead = function( particle ) {particle.target.visible = false;particleCloud.remove( particle.target );};sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160));emitterpos = new THREE.Vector3();sparksEmitter.addInitializer(new SPARKS.Position( new SPARKS.PointZone( emitterpos ) ) );sparksEmitter.addInitializer(new SPARKS.Lifetime(0,2));sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle));sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0,-50,10))));// TOTRY Set velocity to move away from centroidsparksEmitter.addAction(new SPARKS.Age());//sparksEmitter.addAction(new SPARKS.Accelerate(0.2));sparksEmitter.addAction(new SPARKS.Move());sparksEmitter.addAction(new SPARKS.RandomDrift(50,50,2000));sparksEmitter.addCallback("created", onParticleCreated);sparksEmitter.addCallback("dead", onParticleDead);sparksEmitter.addCallback("updated", function( particle ) {particle.target.position.copy( particle.position );});sparksEmitter.start();// End Particlesrenderer = new THREE.CanvasRenderer();renderer.setClearColor( 0xf0f0f0 );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );//window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}//document.addEventListener( 'mousemove', onDocumentMouseMove, false );function onDocumentMouseDown( event ) {event.preventDefault();mouseXOnMouseDown = event.clientX - windowHalfX;targetRotationOnMouseDown = targetRotation;if ( sparksEmitter.isRunning() ) {sparksEmitter.stop();} else {sparksEmitter.start();}}function onDocumentMouseMove( event ) {mouseX = event.clientX - windowHalfX;targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;}function onDocumentTouchStart( event ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;targetRotationOnMouseDown = targetRotation;}}function onDocumentTouchMove( event ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseX = event.touches[ 0 ].pageX - windowHalfX;targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;}}//function animate() {//更新场景requestAnimationFrame( animate );render();}function render() {timeOnShapePath += 0.0337;if (timeOnShapePath > 1) timeOnShapePath -= 1;// TODO Create a PointOnShape Action/Zone in the particle enginevar pointOnShape = heartShape.getPointAt( timeOnShapePath );emitterpos.x = pointOnShape.x * 5 - 100;emitterpos.y = -pointOnShape.y * 5 + 400;// Pretty cool effect if you enable this// particleCloud.rotation.y += 0.05;group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;renderer.render( scene, camera );}</script><div style="text-align:center;"><p>来源:<a href="/item.htm?id=575319661235&scm=0619.rec.1118934586.575319661235&WangxActionRectLeft=0&WangxActionRectTop=411&WangxActionRectRight=1070&WangxActionRectBottom=514&WangxCardRectLeft=801&WangxCardRectTop=411&WangxCardRectRight=1070&WangxCardRectBottom=514" target="_blank">别不快乐淘宝店</a></p></div></body></html>