當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
生活随笔
收集整理的這篇文章主要介紹了
情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是程序員表白系列中的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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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="http://web.tanganbin.cn/biaobai_shengdan/" /><title>七夕雪花</title><!-- <link rel="stylesheet" href="css/buttons.css"> --><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(https://z3.ax1x.com/2021/07/21/WackfH.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.minbox li:nth-child(2) {background: url(https://z3.ax1x.com/2021/07/21/WacNn0.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3) {background: url(https://z3.ax1x.com/2021/07/21/WacwAU.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);}.minbox li:nth-child(4) {background: url(https://z3.ax1x.com/2021/07/21/Waca7T.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5) {background: url(https://z3.ax1x.com/2021/07/21/WacYXq.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);}.minbox li:nth-child(6) {background: url(https://z3.ax1x.com/2021/07/21/Wac1hQ.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);}.maxbox li:nth-child(1) {background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.maxbox li:nth-child(2) {background: url(https://z3.ax1x.com/2021/07/21/WagDVf.png) no-repeat 0 0;-webkit-transform: translateZ(50px);}.maxbox li:nth-child(3) {background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);}.maxbox li:nth-child(4) {background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);}.maxbox li:nth-child(5) {background: url(https://z3.ax1x.com/2021/07/21/Wag0qP.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);}.maxbox li:nth-child(6) {background: url(https://z3.ax1x.com/2021/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="http://web.tanganbin.cn/biaobai_shengdan/picture/tx.jpg" id="logo"><br><br><br><h1 style=" color:#3FF">?2021.5.20與你相愛 1314天~</h1><h2 style=" color:#3FF">祝你享盡七夕情人節的快樂和喜悅。</h2><!-- 相冊 S --><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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 圆桌会回顾 | SecureBoost：
- 下一篇： Linux 使用curl认证深信服上网行