网页制作模板的网站,网站的关键词在哪设置,温州免费网站建站模板,建设银行信用卡网站查询这是程序员表白系列中的100款网站表白之一#xff0c;旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站#xff0c;可以任意修改和使用#xff0c;很多人会希望向心爱的男孩女孩告白#xff0c;生性腼腆的人即使那个TA站在眼前都不敢向前表白… 这是程序员表白系列中的100款网站表白之一旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站可以任意修改和使用很多人会希望向心爱的男孩女孩告白生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。 ❤ 【作者主页——获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——毕设项目精品实战案例】 文章目录 一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码 三、精彩专栏 一、网页介绍
1 网页简介基于 HTMLCSSJavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑任意HTML编辑软件如Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作。 一、网页效果 二、代码展示
1.HTML代码
代码如下示例以下仅展示部分代码供参考~
htmlheadmeta charsetutf-8 /link typetext/css href./css/style.css relstylesheet /script srchttps://www.jq22.com/jquery/jquery-1.10.2.js/scriptstyle typetext/css/* body {background: #000;position: relative;} */html,body {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.container {width: 100%;height: 100%;margin: 0;padding: 0;z-index: 9999 !important;}#music {z-index: 999999 !important;position: fixed;top: 0;left: 0;}.canvas {bottom: 0;left: 0;position: absolute;right: 0;top: 0;}#wrapper {display: flex;height: 100vh;width: 100vw;}.content {background: rgba(0, 0, 0, 0.8);color: #f4f4f4;height: 200px;margin: auto;padding: 2rem;position: relative;overflow: hidden;width: 400px;z-index: 1;}a {color: #999;}/style/headbodydiv idwrapper!-- div classcontentIn photography, is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as the way the lens renders out-of-focus points of light. Differences in lens aberrations and aperture shapecause some lens designs to blur the image in a way that is pleasing to the eye, while others produce blurring that is unpleasant or distractinggood and bad bokeh, respectively. Bokeh occurs for parts of the scene that lie outside thedepth of field./div --audiosrcsd.mp3controlscontrolsautoplayautoplaylooploopidmusic/audiodiv idjsi-snow-container classcontainer/divdiv classboxul classminboxli/lili/lili/lili/lili/lili/li/ulol classmaxboxli/lili/lili/lili/lili/lili/li/ol/div/div/bodyscriptuse strict;var parentEl;var c1;var c2;var ctx1;var ctx2;var canvasWidth;var canvasHeight;var sizeBase;var count;var hue;var options;var parts [];/*** Helper function to create a HTML5 canvas and add a class to it* return {[canvas]}*/function createCanvas() {var canvas document.createElement(canvas);canvas.classList.add(canvas);if (navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {var box document.querySelectorAll(.box)[0];box.style.left -42%;}return canvas;}/*** Helper function to generate a random value between min and max* param {[int]} min [min value]* param {[int]} max [max value]* return {[int]} [random value between min and max]*/function rand(min, max) {return Math.random() * (max - min) min;}/*** Helper function to generate hsla string for canvas 2d context* param {[int]} h [hue]* param {[int]} s [saturation]* param {[int]} l [lightness]* param {[float]} a [alpha]* return {[string]}*/function hsla(h, s, l, a) {return hsla( h , s %, l %, a );}/*** Helper function used for debouncing* param {[Function]} fn [function to debounce]* param {[int]} delay [debounce delay]*/function debounce(fn, delay) {var timer null;return function () {var context this;var args arguments;clearTimeout(timer);timer setTimeout(function () {fn.apply(context, args);}, delay);};}function createAnimation() {sizeBase canvasWidth canvasHeight;count Math.floor(sizeBase * 0.3);hue rand(0, 360);options {radiusMin: 1,radiusMax: sizeBase * 0.04,blurMin: 10,blurMax: sizeBase * 0.04,hueMin: hue,hueMax: hue 100,saturationMin: 10,saturationMax: 70,lightnessMin: 20,lightnessMax: 50,alphaMin: 0.1,alphaMax: 0.5,};ctx1.clearRect(0, 0, canvasWidth, canvasHeight);ctx1.globalCompositeOperation lighter;while (count--) {//init variables for canvas contextvar radius rand(options.radiusMin, options.radiusMax);var blur rand(options.blurMin, options.blurMax);var x rand(0, canvasWidth);var y rand(0, canvasHeight);var hue rand(options.hueMin, options.hueMax);var saturation rand(options.saturationMin, options.saturationMax);var lightness rand(options.lightnessMin, options.lightnessMax);var alpha rand(options.alphaMin, options.alphaMax);//draw on canvas contextctx1.shadowColor hsla(hue, saturation, lightness, alpha);ctx1.shadowBlur blur;ctx1.beginPath();ctx1.arc(x, y, radius, 0, Math.PI * 2);ctx1.closePath();ctx1.fill();}parts.length 0; //clear parts arrayfor (var i 0;i Math.floor((canvasWidth canvasHeight) * 0.03);i) {parts.push({radius: rand(1, sizeBase * 0.03),x: rand(0, canvasWidth),y: rand(0, canvasHeight),angle: rand(0, Math.PI * 2),vel: rand(0.1, 0.5),tick: rand(0, 10000),});}}function resize() {canvasWidth c1.width c2.width parentEl.offsetWidth;canvasHeight c1.height c2.height parentEl.offsetHeight;}function animate() {window.requestAnimationFrame(animate);ctx2.clearRect(0, 0, canvasWidth, canvasHeight);ctx2.globalCompositeOperation source-over;ctx2.shadowBlur 0;ctx2.drawImage(c1, 0, 0); //copy canvas 1 to canvas 2ctx2.globalCompositeOperation lighter;var i parts.length;ctx2.shadowBlur 15;ctx2.shadowColor #fff;while (i--) {var part parts[i];part.x Math.cos(part.angle) * part.vel;part.y Math.sin(part.angle) * part.vel;part.angle rand(-0.05, 0.05);ctx2.beginPath();ctx2.arc(part.x, part.y, part.radius, 0, Math.PI * 2);var alpha 0.075 Math.cos(part.tick * 0.02) * 0.05;ctx2.fillStyle hsla(0, 0, 100, alpha);ctx2.fill();//make sure particles stay within canvas boundsif (part.x - part.radius canvasWidth) {part.x -part.radius;}if (part.x part.radius 0) {part.x canvasWidth part.radius;}if (part.y - part.radius canvasHeight) {part.y -part.radius;}if (part.y part.radius 0) {part.y canvasHeight part.radius;}part.tick;}}function init() {//create canvasesc1 createCanvas();c2 createCanvas();ctx1 c1.getContext(2d);ctx2 c2.getContext(2d);parentEl document.getElementById(wrapper);parentEl.insertBefore(c2, parentEl.firstChild);parentEl.insertBefore(c1, c2);resize();createAnimation();animate();window.addEventListener(resize,debounce(function () {resize();createAnimation();}, 250));}init();/script
/html 2.CSS代码 charset utf-8;
* {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 {width: 200px;height: 200px;background-size: cover;background-repeat: no-repeat;background-attachment: fixed;background-size: 100% 100%;position: relative;z-index: 999999 !important;top: 45%;left: -50%;-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(../img/01.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {background: url(../img/02.png) no-repeat 0 0;-webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {background: url(../img/03.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {background: url(../img/04.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {background: url(../img/05.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {background: url(../img/06.png) no-repeat 0 0;-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {background: url(../img/1.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {background: url(../img/2.png) no-repeat 0 0;-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {background: url(../img/3.png) no-repeat 0 0;-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {background: url(../img/4.png) no-repeat 0 0;-webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {background: url(../img/5.png) no-repeat 0 0;-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {background: url(../img/6.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);}
} 三、精彩专栏
看到这里了就 【点赞好评收藏】 三连 支持下吧你的支持是我创作的动力。——
以上内容技术相关问题欢迎一起交流学习
