html超浪漫的3D动态相册表白网站制作 html程序员专属情人节表白网站

最新推荐文章于 2024-06-30 19:54:09 发布
最新推荐文章于 2024-06-30 19:54:09 发布
阅读量337 收藏 5
点赞数 1
分类专栏： web课程与设计 文章标签： html 3d 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512499/article/details/127344562
版权

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

67 飘动的心-3D相册(创意小网页)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!--
 * @Author: your name
 * @Date: 2021-09-07 10:06:32
 * @LastEditTime: 2021-09-07 10:29:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \飘动的心(特效)\index.html
-->
<html>

<head>
    <meta charset="utf-8">
    <title>飘动的心-3D相册</title>
    <script src="js/jquery.min.js"></script>
    <script src="https://unpkg.com/css-doodle@0.15.3/css-doodle.min.js"></script>
    <link type="text/css" href="./css/style.css" rel="stylesheet" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background: #270F34;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            contain: content;
            overflow: clip;
        }
    </style>
    <style>
        /* 飘动的心 */
        css-doodle {
            --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);

            --rule: ( :doodle {
                /* 试试修改60 看看效果 你会惊喜发现 */
                    @grid: 60x1 / 18vmin;
                    --deg: @p(-180deg, 180deg);
                }

                :container {
                    perspective: 30vmin;
                }

                :after, :before {
                    content: '';
                    background: var(--color);
                    @place-cell: @r(100%) @r(100%);
                    @size: @r(6px);
                    @shape: heart;
                }

                @place-cell: center;
                @size: 100%;
                /* box-shadow: @m2(0 0 50px var(--color)); */
                background: @m100(radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat);
                will-change: transform, opacity;
                animation: scale-up 12s linear infinite;
                animation-delay: calc(-12s / @I * @i);

                @keyframes scale-up {
                    0%, 95.01%, 100% {
                        transform: translateZ(0) rotate(0);
                        opacity: 0;
                    }

                    10% {
                        opacity: 1;
                    }

                    95% {
                        transform: translateZ(35vmin) rotateZ(@var(--deg));
                    }
                }

            )
        }
    </style>

</head>

<body>
    <!-- 飘动的心 -->
    <css-doodle use="var(--rule)"> </css-doodle>
    <!-- 音乐 -->
    <audio autoplay="autopaly">
        <source src="renxi.mp3" type="audio/mp3" />
    </audio>
    <!-- 3D相册 -->
    <div id="jsi-cherry-container" class="container">
        <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>
</body>
<script>
    /* 兼容H5和web端 */
       var box = document.querySelectorAll('.box')[0];
    if (
        navigator.userAgent.match(
            /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
    ) {
        box.style.top = '45%';
        box.style.left = '42%';
    } else {
        box.style.top = '44%';
        box.style.left = '44%';
    }
</script>

</html>

🏠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: absolute;
  /* margin-left: 50%; */
  /* margin-top: 50%; */
  /* transform: translate(-50%,-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);
  }
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

STU网页优选
关注
专栏目录
HTML5七夕情人节表白网页制作【3D雪花展开相册】HTML+CSS+JavaScript 程序员表白网页 简单的3D相册制作
QQ_____365392777的博客
08-12 73
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。......
HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
热门推荐
HTML5学生网页设计作业成品模板
11-18 1万+
HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。 ????文章末尾-已经附上源码下载地址 ????作者主页-更多源码 ????100款七夕情人节告白源码-专栏文章 作品介绍 1.网页作品简
表白网页源码
09-25
表白网页源码自己的随意玩玩吧,就是个源码加成品.
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 6997
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
动态相册前端代码
最新发布
2401_82628760的博客
06-30 772
video controls autoplay name="media" id="js-video"><source src="./mp3/白月光与朱砂痣.mp3" type="video/mp4"></video><img src="./img-one/开始.png" alt="" id="img1"/><img src="./img-one/暂停.png" alt="" id="img2"/>console.log(box, '移动端');// 音频控制进度条。
js自转旋转木马相册，情人节浪漫定制，程序员的专属表白源代码
02-18
js自转旋转木马相册，情人节浪漫定制，程序员的专属表白源代码 js自转旋转木马相册，情人节浪漫定制，程序员的专属表白源代码 js自转旋转木马相册，情人节浪漫定制，程序员的专属表白源代码 js自转旋转木马相册，...
HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5学生网页设计作业成品模板
11-16 1868
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。 ????文章末尾-已经附上源码下载地址 ????作者主页-更多源码 ????100款七夕情人节告白源码-专栏文章 作品介绍 1.网页作品
HTML5七夕情人节表白网页制作【自定义文字-烟花告白】HTML+CSS+JavaScript浪漫烟花表白网页制作
专注于dreamweaver网页设计制作
08-09 550
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。......
html表白网页源码
08-24
表白网页 七夕 情人可以用来表白的源码 纯静态 简单好用
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》
02-02
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》 可以玩的网页 节日送给女朋友 礼物【修正版】 打开网页 会出现心形排列的字母 用鼠标移动字母 从左到右排列成 MerryChristmas 会有奇迹出现 点开试试吧 定会让你的女生感动不已 PS：里面的文字和照片是鄙人和我女友的，亲们记得换成自己想说的话和想要的照片，祝福每对情侣开心幸福！
html网页表白树源码
04-15
非常绚丽的前端页面表白
HTML表白源码
06-29
HTML网页表白程序源码 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢!]
表白Html网页源码.rar
02-07
表白Html网页源码，程序员不能错过的表白网页。文件包里除了几个表白网页外还有几个既好看又实用的404网页，都是我建站常用而且经典的网页源码
撩妹/撩仔代码
Null - 滨
02-14 3413
撩妹/撩仔代码 @Null - 滨 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" type="image/x-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA2klEQVQ4T62TUQ6CMAyG2/GCByA
浪漫的html表白源代码_Love：程序猿的方式【情人节&520—我爱你】动画加音效 → 那些年最浪漫的表白(帮你得到你的她)...
weixin_39702714的博客
12-08 4556
Love：程序猿的方式~【情人节&520—我爱你】~动画加音效 → 那些年最浪漫的表白(帮你得到你的她)导读 本文章代码的实现，主要参考GitHub(wuxia2001和hackerzhou)，主页代码，博主已进行部分修改。程序猿的方式，将爱进行到底！愿天下有情人，终成眷属！遗憾只属于后悔的人，走过路过，千万不要错过。祝网友们，遇到志同道合的人，就鼓起勇气，勇敢牵手吧！目录爱的...
HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript
HTML网页设计
07-24 2700
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。......
html实现表白biu爱心特效 (程序员专属情人节表白网站)
08-22
要实现一个表白biu爱心特效的网站，我们可以使用HTML的标签和CSS样式来完成。 首先，我们需要创建一个HTML文件，并引入CSS样式表。在该文件中，我们可以使用<div>或<span>标签来创建一个容器，用于展示爱心特效。 然后，我们可以使用CSS中的动画属性来实现biu爱心特效。为容器添加一个背景图片，可以是爱心的图片，然后使用@keyframes定义一个动画序列，让爱心从一个位置滑动到另一个位置。可以设置动画的持续时间、速度、延迟等属性，使其看起来像是biu的一闪而过。 接着，我们可以使用JavaScript来给表白按钮添加一个点击事件。当用户点击按钮时，可以通过JavaScript改变容器的样式，触发biu爱心特效的动画效果。 最后，我们可以在页面中添加一些文字或图片，用于表白的内容，以及一些其他的美化和交互效果，如鼠标悬停时的特效等，让整个页面更加有趣和浪漫。 通过以上步骤，我们就可以实现一个程序员专属的情人节表白网站，让表白更加特别和有意义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值