第一句子网 > 情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5

情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5

时间：2019-12-22 11:39:38

这是程序员表白系列中的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 htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /><base href="/biaobai_shengdan/" /><title>七夕雪花</title><style type="text/css">body {background-color: #000044;height: 100%;/* background: url(images/bj.jpg) repeat-x; */background: url(images/bj.jpg) repeat;margin: 0px;overflow: hidden;}a {color: #0078ff;}.cs {width: 100%;height: 100%;margin: 0 auto;position: absolute;text-align: center;font-family: 微软雅黑;color: rgba(255, 16, 34, 0.48);}img#logo {width: 128px;background-size: cover;border-radius: 200px;box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);border: 3px solid #00a0ff;opacity: 1;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;transition: all 1.0s;}#logo:hover {box-shadow: 0 0 10px #fff;-webkit-box-shadow: 0 0 19px #fff;transform: rotate(360deg);-ms-transform: rotate(360deg);/* IE 9 */-moz-transform: rotate(360deg);/* Firefox */-webkit-transform: rotate(360deg);/* Safari 和 Chrome */-o-transform: rotate(360deg);/* Opera */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}body {cursor: url(./images/Link.cur), default;}a:hover,li:hover,img:hover {cursor: url(./images/Regular.cur), pointer;}* {margin: 0;padding: 0;}body {max-width: 100%;min-width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: absolute;margin-left: auto;margin-right: auto;}li {list-style: none;}.box {z-index: 999999 !important;width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: fixed !important;top: 42%;left: 40%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX(13deg);-webkit-animation: move 5s linear infinite;}.minbox {width: 100px;height: 100px;position: absolute;left: 50px;top: 30px;-webkit-transform-style: preserve-3d;}.minbox li {width: 100px;height: 100px;position: absolute;left: 0;top: 0;}.minbox li:nth-child(1) {background: url(//07/21/WackfH.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.minbox li:nth-child(2) {background: url(//07/21/WacNn0.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3) {background: url(//07/21/WacwAU.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);}.minbox li:nth-child(4) {background: url(//07/21/Waca7T.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5) {background: url(//07/21/WacYXq.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);}.minbox li:nth-child(6) {background: url(//07/21/Wac1hQ.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);}.maxbox li:nth-child(1) {background: url(//07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.maxbox li:nth-child(2) {background: url(//07/21/WagDVf.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.maxbox li:nth-child(3) {background: url(//07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);}.maxbox li:nth-child(4) {background: url(//07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);}.maxbox li:nth-child(5) {background: url(//07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);}.maxbox li:nth-child(6) {background: url(//07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);}.maxbox {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;}.maxbox li {width: 200px;height: 200px;background: #fff;border: 1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition: all 1s ease;}.maxbox li:nth-child(1) {-webkit-transform: translateZ(100px);}.maxbox li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(100px);}.maxbox li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(100px);}.maxbox li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(100px);}.maxbox li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(100px);}.maxbox li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(100px);}.box:hover ol li:nth-child(1) {-webkit-transform: translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(2) {-webkit-transform: rotateX(180deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(3) {-webkit-transform: rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(4) {-webkit-transform: rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(5) {-webkit-transform: rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(6) {-webkit-transform: rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}@keyframes move {0% {-webkit-transform: rotateX(13deg) rotateY(0deg);}100% {-webkit-transform: rotateX(13deg) rotateY(360deg);}}</style></head><body onLoad="init()"><div class="cs"><img src="/biaobai_shengdan/picture/tx.jpg" id="logo"><br><br><br><h1 style=" color:#3FF">❤.5.20与你相爱 1314天~</h1><h2 style=" color:#3FF">祝你享尽七夕情人节的快乐和喜悦。</h2><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></div><div id="MagicFace" style="position: absolute; z-index: 999;"><script src="js/christmas.js"></script></div><script type="text/javascript" src="js/threecanvas.js"></script><script type="text/javascript" src="js/snow.js"></script><script type="text/javascript">var SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT = window.innerHeight;var container;var particle;var camera;var scene;var renderer;var mouseX = 0;var mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var particles = [];var particleImage = new Image(); //THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );particleImage.src = 'images/ParticleSmoke.png';function init() {container = document.createElement('div');document.body.appendChild(container);camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);camera.position.z = 1000;scene = new THREE.Scene();scene.add(camera);renderer = new THREE.CanvasRenderer();renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);var material = new THREE.ParticleBasicMaterial({map: new THREE.Texture(particleImage)});for (var i = 0; i < 500; i++) {particle = new Particle3D(material);particle.position.x = Math.random() * 2000 - 1000;particle.position.y = Math.random() * 2000 - 1000;particle.position.z = Math.random() * 2000 - 1000;particle.scale.x = particle.scale.y = 1;scene.add(particle);particles.push(particle);}container.appendChild(renderer.domElement);document.addEventListener('mousemove', onDocumentMouseMove, false);document.addEventListener('touchstart', onDocumentTouchStart, false);document.addEventListener('touchmove', onDocumentTouchMove, false);setInterval(loop, 1000 / 60);}function onDocumentMouseMove(event) {mouseX = event.clientX - windowHalfX;mouseY = event.clientY - windowHalfY;}function onDocumentTouchStart(event) {if (event.touches.length == 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;mouseY = event.touches[0].pageY - windowHalfY;}}function onDocumentTouchMove(event) {if (event.touches.length == 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;mouseY = event.touches[0].pageY - windowHalfY;}}//function loop() {for (var i = 0; i < particles.length; i++) {var particle = particles[i];particle.updatePhysics();with(particle.position) {if (y < -1000) y += 2000;if (x > 1000) x -= 2000;else if (x < -1000) x += 2000;if (z > 1000) z -= 2000;else if (z < -1000) z += 2000;}}camera.position.x += (mouseX - camera.position.x) * 0.05;camera.position.y += (-mouseY - camera.position.y) * 0.05;camera.lookAt(scene.position);renderer.render(scene, camera);}</script><audio autoplay="autoplay" loop="loop"><source src="music/yinyue.mp3" type="audio/mpeg"></audio></body></html>

三、精彩专栏

看到这里了就【点赞，关注，收藏】三连支持下吧，你的支持是我创作的动力。

情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。