别具一格,独此一家，原创唯美浪漫情人节表白专辑

不一样的惊喜哦~！（html5,css3,svg)表白爱心代码（复制就可用）（4）

款式四：时光的记忆款

1、拷贝完整源代码

2、更新时光盒所显示的相片

3、写上简短的表白文字

4、检验修改表白内容后的效果

5、打包发送

6、完整源代码

款式四：时光的记忆款

动态图

适用：相片回忆，精简的几句表白文字。

修改使用方法：

1、拷贝完整源代码

保存成index.html文件。具体方法见原创唯美浪漫情人节表白专辑（1）的介绍。

2、更新时光盒所显示的相片

准备12张图片，大小为500px*500px

挑选6张显示在最外面的图片：

将文件名改为：w1.jpg、w2.jpg、w3.jpg、w4.jpg、w5.jpg、w6.jpg。

挑选6张显示在最里面的图片：

将文件名改为：i1.jpg、i2.jpg、i3.jpg、i4.jpg、i5.jpg、i6.jpg。

将所有图片拷贝到名字为：img的目录中。

3、写上简短的表白文字

修改：【有一种路叫做浪漫。。。美好的未来】这几个字----》为你想表白的简短文字

此部分是修改以下显示内容：

4、检验修改表白内容后的效果

双击运行index.html文件，或用浏览器打开index.html文件，即可显示表白效果。

5、打包发送

将你的文件打包成.zip\.rar等通用压缩格式（index.html和img目录一起），发给你喜欢的人，让她（他）解压压缩包后，运行index.html文件即可。

6、完整源代码

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8" /><link rel="apple-touch-icon" type="image/png" href="https://.png" /><link rel="shortcut icon" type="image/x-icon" href="https://.ico" /><link rel="mask-icon" type="image/x-icon" href="https://.svg" color="#111" /><meta name="逆境清醒2023情人节专辑" content="逆境清醒2023情人节专辑"><title>时光的记忆款旋转相册 逆境清醒</title><link rel="stylesheet" href=".css"><style>html {background: #000;height: 100%;}.body {position: absolute;background: #000;height: 100%;}.axdiv {align-items: center;justify-content: center;position: relative;}.saysomething {position: relative;height: 80px;padding-top: 30px;background-image: linear-gradient(to top, #3ab5b0 0%, #3d99be 31%, #56317a 100%);color: white;text-align: center;align-items: center;justify-content: center;border: 5px solid white;}canvas {position: absolute;}* {margin: 0;padding: 0;color: #FFF;}canvas#canvas {display: block;background: #000;}ul#navigation {position: absolute;height: 100%;top: 0;right: 0;text-align: center;margin-right: 1.6rem;font-size: 0.8rem;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;}ul#navigation > li {display: inline-block;}.wrap {width: 10px;height: 10px;margin: 200px 400px;position: relative;align-items: center;justify-content: center;}.cube {width: 1000px;height: 400px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotatecube 20s infinite;animation-timing-function: linear;align-items: center;justify-content: center;}@-webkit-keyframes rotatecube {from {transform: rotateX(0deg) rotateY(0deg)}to {transform: rotateX(360deg) rotateY(360deg)}}.cube div {position: absolute;width: 300px;height: 300px;//opacity: .8;opacity: 1;transition: all .4s;padding: 20px;border: 10px solid white;}.pic {width: 300px;height: 300px;}.img {}.cube .out_front {transform: rotateY(0deg) translateZ(180px)}.cube .out_back {transform: translateZ(-180px) rotateY(180deg)}.cube .out_left {transform: rotateY(90deg) translateZ(180px)}.cube .out_right {transform: rotateY(-90deg) translateZ(180px)}.cube .out_top {transform: rotateX(90deg) translateZ(180px)}.cube .out_bottom {transform: rotateX(-90deg) translateZ(180px)}.cube span {display: bloack;width: 200px;height: 200px;position: absolute;top: 50px;left: 50px}.cube .in_pic {width: 200px;height: 200px}.cube .in_front {transform: rotateY(0deg) translateZ(100px)}.cube .in_back {transform: translateZ(-100px) rotateY(180deg)}.cube .in_left {transform: rotateY(90deg) translateZ(100px)}.cube .in_right {transform: rotateY(-90deg) translateZ(100px)}.cube .in_top {transform: rotateX(90deg) translateZ(100px)}.cube .in_bottom {transform: rotateX(-90deg) translateZ(100px)}.cube:hover .out_front {transform: rotateY(0deg) translateZ(400px)}.cube:hover .out_back {transform: translateZ(-400px) rotateY(180deg)}.cube:hover .out_left {transform: rotateY(90deg) translateZ(400px)}.cube:hover .out_right {transform: rotateY(-90deg) translateZ(400px)}.cube:hover .out_top {transform: rotateX(90deg) translateZ(400px)}.cube:hover .out_bottom {transform: rotateX(-90deg) translateZ(400px)}</style><script>
(function () {'use strict';window.addEventListener('load', function () {var canvas = document.getElementById('canvas');if (!canvas || !canvas.getContext) {return false;}/********************Random Number********************/function rand(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);}/********************Var********************/var ctx = canvas.getContext('2d');var X = canvas.width = window.innerWidth;var Y = canvas.height = window.innerHeight;var mouseX = X / 2;var mouseY = Y / 2;var shapes = [];var shapeNum = 100;var angle = 360 / 2;var radian = angle * Math.PI / 180;var hsl = rand(0, 360);/********************Animation********************/window.requestAnimationFrame =window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ||function(cb) {setTimeout(cb, 17);};/********************Shape********************/function Shape(ctx, x, y, i) {this.ctx = ctx;this.init(x, y, i);}Shape.prototype.init = function(x, y, i) {this.x = x;this.y = y;this.i = i;this.r = 15 * i;this.a = 1 * i;this.rad = this.a * Math.PI / 180;};Shape.prototype.draw = function() {var ctx  = this.ctx;ctx.save();ctx.strokeStyle = 'hsl(' + hsl + ', ' + (100 - this.i) + '%, ' + (100 - this.i) + '%';;ctx.lineWidth = 0.4;ctx.translate(this.x, this.y);ctx.rotate(Math.sin(this.rad * 3));ctx.translate(-this.x, -this.y);ctx.beginPath();ctx.moveTo(Math.sin(this.rad) * 100 + Math.sin(radian * 1) * this.r + this.x, Math.cos(this.rad) * 100 + Math.cos(radian * 1) * this.r + this.y);ctx.lineTo(Math.sin(this.rad) * 100 + Math.sin(radian * 2) * this.r + this.x, Math.cos(this.rad) * 100 + Math.cos(radian * 2) * this.r + this.y);ctx.lineTo(Math.sin(this.rad) * 100 + Math.sin(radian * 3) * this.r + this.x, Math.cos(this.rad) * 100 + Math.cos(radian * 3) * this.r + this.y);ctx.closePath();ctx.stroke();ctx.restore();};Shape.prototype.updateParams = function() {this.a += 1;this.rad = this.a * Math.PI / 180;};Shape.prototype.resize = function() {this.x = X / 2;this.y = Y / 2;};Shape.prototype.render = function(i) {this.updateParams();this.draw();};for (var i = 0; i < shapeNum; i++) {var s = new Shape(ctx, X / 2, Y / 2, i);shapes.push(s);}/********************Render********************/function render() {//ctx.clearRect(0, 0, X, Y);ctx.globalCompositeOperation = "darken";ctx.globalAlpha = 0.05;ctx.fillStyle = "rgb(0,0,0)";ctx.fillRect(0, 0, X, Y);ctx.globalCompositeOperation = "source-over";ctx.globalAlpha = 1;for (var i = 0; i < shapes.length; i++) {shapes[i].render(i);}requestAnimationFrame(render);}render();/********************Color********************/function changeColor() {var time = rand(1000, 5000);hsl = rand(0, 360);setTimeout(changeColor, time);}changeColor();/********************Event********************/function onResize() {X = canvas.width = window.innerWidth;Y = canvas.height = window.innerHeight;for (var i = 0; i < shapes.length; i++) {shapes[i].resize();}}window.addEventListener('resize', function(){onResize();});canvas.addEventListener('wheel', function(e){for (var i = 0; i < shapes.length; i++) {shapes[i].r += e.deltaY / 10;}}, false);var touchStartY;var touchMoveY;var touchEndY;canvas.addEventListener('touchstart', function(e) {var touch = e.targetTouches[0];touchStartY = touch.pageY;}, false);canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];touchMoveY = touch.pageY;touchEndY = touchStartY - touchMoveY;for (var i = 0; i < shapes.length; i++) {shapes[i].r -= touchEndY / 10;}}, false);canvas.addEventListener('touchend', function(e) {touchStartY = null;touchMoveY = null;touchEndY = null;}, false);});// Authorconsole.log('File Name / eyesight.js\nCreated Date / Jun 28, 2020\nAuthor / Toshiya Marukubo\nTwitter / https://twitter.com/toshiyamarukubo');
})();
</script>
</head>
<body><canvas id="canvas" width="1519" height="746"></canvas><div class="axdiv"><div class="saysomething"><h1>有一种路叫做浪漫，那里有你给我美好的未来。</h1></div></div><div class="wrap"><div class="cube"><div class="out_front"><img src="img/w1.jpg" class="pic" /></div><div class="out_back"><img src="img/w2.jpg" class="pic"></div><div class="out_left"><img src="img/w3.jpg" class="pic"></div><div class="out_right"><img src="img/w4.jpg" class="pic"></div><div class="out_top"><img src="img/w5.jpg" class="pic"></div><div class="out_bottom"><img src="img/w6.jpg" class="pic"></div><span class="in_front"><img src="img/i1.jpg" class="in_pic"></span><span class="in_back"><img src="img/i2.jpg" class="in_pic"></span><span class="in_left"><img src="img/i3.jpg" class="in_pic"></span><span class="in_right"><img src="img/i4.jpg" class="in_pic"></span><span class="in_top"><img src="img/i5.jpg" class="in_pic"></span><span class="in_bottom"><img src="img/i6.jpg" class="in_pic"></span></div></div></body>
</html>

原创唯美浪漫情人节表白专辑（1）

原创唯美浪漫情人节表白专辑（2）

原创唯美浪漫情人节表白专辑（3）

原创唯美浪漫情人节表白专辑（4）

推荐阅读：


		原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)更好的向你所喜欢的人表达内心的感受。
		2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子
25		2023春节祝福系列第一弹（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）
24		HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)
23		草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码
22		【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
21		python爱心源代码集锦
20		巴斯光年python turtle绘图__附源代码
19		Three.js实例详解___旋转的精灵女孩(附完整代码和资源)
18		草莓熊python turtle绘图（玫瑰花版）附源代码
17		立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦
16		皮卡丘python turtle海龟绘图（电力球版）附源代码
15		【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)
14		草莓熊python turtle绘图（风车版）附源代码
13		用代码过中秋，python海龟月饼你要不要尝一口？
12		《 Python List 列表全实例详解系列》__系列总目录
11		用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
10		Python函数方法实例详解全集(更新中...)
9		matplotlib 自带绘图样式效果展示速查（28种，全）
8		手机屏幕坏了____怎么把里面的资料导出（18种方法）
7		2023年1月多家权威机构____编程语言排行榜__薪酬状况
6		Python中Print()函数的用法___实例详解(全，例多）
5		色彩颜色对照表（300种颜色）(16进制、RGB、CMYK、HSV、中英文名)
4		Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）
3		Tomcat 启动闪退问题解决集（八大类详细）
2		Tomcat端口配置（详细）
1		Tomcat10 安装（Windows环境）（详细）

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码（4）相关推荐

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(1) 一. 前言回眸之间,丰盈了岁月,涟漪了思绪,轻轻落笔,不写伤痕,不写仇怨,只写岁月经历领悟后 ...
别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(3)
别具一格,原创唯美浪漫情人节表白专辑, (复制就可用)(html5,css3,svg)表白爱心代码(3) 目录款式三:心形实时显示认识多长时间桃花飞舞(猫咪)款 1.拷贝完整源代码 2.拷贝完整js ...
分享清新唯美浪漫中秋PPT模板
接下来小编将和大家分享得是主题为清新唯美浪漫中秋PPT模板.这份PPT模板的模板样式是以浅色调为背景颜色,模板的整体风格突显清新与唯美.下面就给大家展示该PPT模板的页面内容. 这份PPT模板是由办公 ...
【特别推荐】10款唯美浪漫的婚礼结婚纪念网站模板
互联网的重要性不言而喻,如今我们的生活已经完全离不开网络.这里给大家分享一组唯美浪漫的结婚邀请网站以及婚礼请柬网站模板,如果你也正想制作这样的网站,相信这些漂亮的网站模板能够带给你很大的帮助,让你快速 ...
20X12 fcpx插件20种唯美浪漫小清新线条婚礼文字标题动画WeddingTitlesv2
20X12 fcpx插件20种唯美浪漫小清新线条婚礼文字标题动画WeddingTitlesv2 [插件介绍] 这是第七季,插件一共包含20种唯美浪漫小清新线条婚礼新郎新娘姓名日期文字标题动画,只有开 ...
程序员编程表达爱情php,2019浪漫情人节：8款程序员必备表白源码
亚当表白夏娃,打开?上帝都不知道的魅力后花园.罗密欧表白朱丽叶,懂得了爱情比任何事情都值得.你也曾经表白过吧? 课桌间,将萌动的心跳化作一张表白小纸条,大学?,不经意间牵起的双手就是美好的承诺,工作后 ...
【VC++游戏开发#六】2D篇 —— 粒子系统(一)：浪漫唯美的场景之雪花飞舞
本文由BlueCoder编写转载请说明出处: http://blog.csdn.net/crocodile__/article/details/16887511 我的邮箱:bluecoder@y ...
java好听的名字_(男孩起名)李白诗中最唯美的三字名字推荐,李白诗中最唯美的三字名字取名方法 - Java伴我余生 - 宝宝起名网...
温馨提示: 本文约有1125个文字,大小约为5KB,预计阅读时间3分钟,本文共 3张图片. 本文李白诗中最唯美的三字名字推荐,李白诗中最唯美的三字名字取名方法,请您欣赏.宝宝起名网众多优秀文章,如果想 ...
婚纱照片视频制作软件哪个好？唯美婚礼视频制作，简单几步就搞定！
浪漫的婚礼上,在大屏幕上播放婚纱照片视频,配上动听的音乐,和吸睛的照片效果,既能让宾客看得开心,也能给婚礼现场制造更加美好的回忆.现在最流行的婚礼MV视频,就是把婚纱照片做成视频的形式.那么,婚纱照片 ...

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码（4）

别具一格,独此一家，原创唯美浪漫情人节表白专辑

不一样的惊喜哦~！（html5,css3,svg)表白爱心代码（复制就可用）（4）

款式四：时光的记忆款

1、拷贝完整源代码

2、更新时光盒所显示的相片

3、写上简短的表白文字

4、检验修改表白内容后的效果

5、打包发送

6、完整源代码

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码（4）相关推荐

最新文章

热门文章