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

news2024/11/17 0:01:46

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

不一样的惊喜哦~!(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);
    
  });
  // Author
  console.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

0a4256d5e96d4624bdca36433237080b.png​​

​​

python爱心源代码集锦
20

4d9032c9cdf54f5f9193e45e4532898c.png​​

​​

巴斯光年python turtle绘图__附源代码
19

074cd3c255224c5aa21ff18fdc25053c.png​​

​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)
18

daecd7067e7c45abb875fc7a1a469f23.png​​

​​​​

​草莓熊python turtle绘图(玫瑰花版)附源代码

17

fe88b78e78694570bf2d850ce83b1f69.png​​

​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16

c5feeb25880d49c085b808bf4e041c86.png​​

​​​​

皮卡丘python turtle海龟绘图(电力球版)附源代码

15

38266b5036414624875447abd5311e4d.png​​

​​​​

【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

14

03ed644f9b1d411ba41c59e0a5bdcc61.png​​

​​​​

草莓熊python turtle绘图(风车版)附源代码

13

09e08f86f127431cbfdfe395aa2f8bc9.png​​

​​​​

用代码过中秋,python海龟月饼你要不要尝一口?

12

40e8b4631e2b486bab2a4ebb5bc9f410.png​​

​​​​

《 Python List 列表全实例详解系列》__系列总目录

11

938bc5a8bb454a41bfe0d4185da845dc.jpeg​​

​​​​

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

10

0f09e73712d149ff90f0048a096596c6.png​​

​​​​

Python函数方法实例详解全集(更新中...)

9

93d65dbd09604c4a8ed2c01df0eebc38.png​​

​​​​

matplotlib 自带绘图样式效果展示速查(28种,全)

8

aa17177aec9b4e5eb19b5d9675302de8.png​​

​​​​

手机屏幕坏了____怎么把里面的资料导出(18种方法)

7

1750390dd9da4b39938a23ab447c6fb6.jpeg​​

​​​​

2023年1月多家权威机构____编程语言排行榜__薪酬状况

6

dc8796ddccbf4aec98ac5d3e09001348.jpeg​​

​​​​

Python中Print()函数的用法___实例详解(全,例多)

5

1ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​

​​​​

色彩颜色对照表(300种颜色)(16进制、RGB、CMYK、HSV、中英文名)

4

80007dbf51944725bf9cf4cfc75c5a13.png​​

​​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

3

c6374d75c29942f2aa577ce9c5c2e12b.png​​

​​​​

Tomcat 启动闪退问题解决集(八大类详细)

2

5218ac5338014f389c21bdf1bfa1c599.png​​

​​​​

Tomcat端口配置(详细)

1

fffa2098008b4dc68c00a172f67c538d.png​​

​​​​

Tomcat10 安装(Windows环境)(详细)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/342281.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Springboot使用MDC进行日志追踪

Springboot使用MDC进行日志追踪前言一、为什么要跟踪日志二、MDC存储日志原理三、开始代码1、封装MDC工具类2、注册日志追踪拦截器四、配置logBack五、查看追踪效果六、要解决traceId传递问题1、在不同线程之间的传递2、远程调用时候的传递总结前言 MDC&#xff08;Mapped Diag…

基于ChatGPT +Node.js的基本使用

一、简介 最近,围绕ChatGPT和OpenAI的话题是层出不穷,国内外的技术工作者都掀起了一股学习OpenAI的技术浪潮,甚至有很多的媒体预测OpenAI将会带来行业的革命,而国外一些大的企业也将OpenAI视为重要的竞争对手,比如Google和微软。 事实上,OpenAI 可以应用于任何涉及理解…

SpringBoot(3)之包结构

根据spring可知道&#xff0c;注解之所以可以使用&#xff0c;是因为通过包扫描器&#xff0c;扫描包&#xff0c;然后才能通过注解开发。 那么springboot需要扫描哪里呢&#xff1f; springboot的默认包扫描器&#xff0c;扫描的是自己所在的包和子包&#xff0c;例子如下 我…

生成式AI对业务流程有哪些影响?企业如何应用生成式AI?一文看懂

集成与融合类ChatGPT工具与技术&#xff0c;以生成式AI变革业务流程ChatGPT背后的生成式AI&#xff0c;聊聊生成式AI如何改变业务流程ChatGPT月活用户过亿&#xff0c;生成式AI对组织的业务流程有哪些影响?生成式AI对业务流程有哪些影响?企业如何应用生成式AI?一文看懂业务流…

Transformer

Transformer由4部分组成&#xff0c;分别是&#xff1a;输入模块、编码模块、解码模块、输出模块整体架构图&#xff1a;一、输入模块结构 &#xff08;1&#xff09;源文本嵌入层及其位置编码器&#xff08;2&#xff09;目标文本嵌入层及其位置编码器二、编码器模块结构由N个…

【计算器】四则运算的算法实现

先实现整数部分 加减乘比较简单, 可以参考: 高精度算法全套&#xff08;加&#xff0c;减&#xff0c;乘&#xff0c;除&#xff0c;全网最详细&#xff09;. 除法我参考的是: 大数加减乘除运算总结 四则运算相关的OJ题目 四则远算 关于除法 基本上参考的是: 大数加减乘除…

数据结构:队列

队列 队列(Queue)是一个数据集合&#xff0c;仅允许在列表的一端进行插入&#xff0c;另一端进行删除。 进行插入的一端称为队尾(rear)&#xff0c;插入动作称为进队或入队 进行删除的一端称为队头(front)&#xff0c;删除动作称为出队 队列的性质:先进先出(First-in, First-o…

C++【二叉树进阶(二叉搜索树)】

文章目录前言1、二叉搜索树1-1、 二叉搜索树概念2、二叉搜索树操作2-1、树和节点的基本框架2-2、二叉搜索树的查找2-3、中序遍历2-4、二叉搜索树的插入2-5、二叉搜索树的删除3、二叉搜索树的模拟实现3-1、循环版本3-2、递归版本4、二叉搜索树的应用4-1、K模型4-2、KV模型4-3、K…

Linux 中断实验

目录 一、Linux 中断简介 上半部与下半部 二、添加设备树 三、编写驱动 1、定义宏 2、编写一个key结构体 3、imx6uirq设备添加成员 ​编辑4、按键中断处理函数 5、按键初始化 6、在驱动入口添加初始化 7、 驱动出口函数 代码如下 四、利用定时器进行消抖处理 1、添…

Spring Security in Action 第十四章 实现资源服务器端

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;以实战为线索&#xff0c;逐步深入SpringSecurity相关知识相关知识&#xff0c;打造完整的SpringSecurity学习步骤&#xff0c;提升工程化编码能力和思维能力&#xff0c;写出高质量代码。希望大家都能够从中有所收获&#…

ArcGIS中的附件功能

从ArcGIS10起,空间数据库增加了"附件"的功能,可灵活管理与要素相关的附加信息,可以是图像、PDF、文本文档或任意其他文件类型。例如,如果用某个要素表示建筑物,则可以使用附件来添加多张从不同角度拍摄的建筑物照片。 启动附件功能 要想使用附件功能,要素类必…

Docker 中遇到的问题

1&#xff1a;docker-tomcat 篇 第一天启动主机和虚拟机都可以正常访问&#xff0c;晚上睡觉的时候就挂起关机睡觉了&#xff0c;但到了第二天主机访问不了了&#xff0c;ping 也能ping 通&#xff0c;后来停掉容器&#xff0c;重启了虚拟机就好了&#xff0c;就很离谱。 这是成…

Web3CN|Damus刷频背后,大众在期待什么样的去中心化社交?

刚过去的一周&#xff0c;许多人的朋友圈包括Twitter、Faceboo在内都在被一串公钥字母刷屏&#xff0c;其重要起因就是 Twitter 前首席执行官 Jack Dorsey 发推称&#xff0c;&#xff08;2月1日&#xff09;基于去中心化社交协议 Nostr 的社交产品 Damus 和 Amethyst 已分别在…

互联网舆情监测系统的设计研究,TOOM舆情监测系统研究框架?

舆情监测研究分析是指通过对社会公众对某个事件、话题、品牌、政策等的态度和情绪进行收集、处理、分析和评估&#xff0c;帮助政府、企业、媒体等利益相关者及时掌握公众的反应&#xff0c;做好应对危机和制定舆情管理策略的工作&#xff0c;互联网舆情监测系统的设计研究&…

全志V853芯片 如何在Tina V85x平台切换sensor?

目的 V85x某方案目前默认Sensor是GC2053。实际使用时若需要用到GC4663&#xff08;比如wdr功能&#xff09;和SC530AI&#xff08;支持500W&#xff09;&#xff0c;可按如下步骤完成切换。 步骤 下面以GC4663为例&#xff0c;SC530AI按相应方式适配。 Step1 检查Sensor驱动…

Spring Security in Action 第十七章 全局方法安全:预过滤和后过滤

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;以实战为线索&#xff0c;逐步深入SpringSecurity相关知识相关知识&#xff0c;打造完整的SpringSecurity学习步骤&#xff0c;提升工程化编码能力和思维能力&#xff0c;写出高质量代码。希望大家都能够从中有所收获&#…

Rust学习入门--【8】复合类型

复合类型&#xff08;compound type&#xff09; 可以将多个不同类型的值组合为一个类型。 Rust中提供了两种内置的复合数据类型&#xff1a;元组&#xff08;tuple&#xff09;和数组&#xff08;array&#xff09;。 元组类型 元组是一个具有 固定长度 的数据集合 —— 无…

按键输入驱动

目录 一、硬件原理 二、添加设备树 1、创建pinctrl 2、创建节点 3、检查 编译复制 三、修改工程模板​编辑 四、驱动编写 1、添加keyio函数 2、添加调用 3、驱动出口函数添加释放 4、添加原子操作 5、添加两个宏定义 6、初始化原始变量 7、打开操作 8、读操作 总体代…

自启动管理 - Win10

自启动管理 - Win10前言关闭开机自启方案1&#xff1a;在软件中设置方案2&#xff1a;在任务管理器设置方案3&#xff08;不推荐&#xff09;&#xff1a;通过注册表管理方案4&#xff1a;通过第三方工具管理工具1&#xff1a;360安全卫士工具2&#xff1a;Autoruns工具3&#…