HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)

为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript

是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个“飘动爱心3D相册”网页,按照下面这个教程就可以给Ta做一个创意满满的祝福了呀~(很简单的哦)

作品介绍

1.网页作品简介方面 :一个超具创意的网页 ,喜欢的可以下载,作品支持手机PC响应式布局 (可自定义12张相片和音乐)

2.网页作品编辑方面:任意HTML编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

文章目录

一、作品演示

❤100款 html+css+JavaScript 表白源码演示地址

PC端演示

HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)

H5手机端

HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)

二、代码目录

HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)

三、代码实现

HTML

<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>


CSS

    <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 {
                :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%;
                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>
@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);
}

JS

<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>

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)


五、源码获取

❉ ~ 关注我,点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

❉3.以上内容技术相关问题可以相互学习,可wx公Z号 ---> web前端小日记 获取更多源码 !
HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)

六、更多表白源码

1.❤100款 html+css+JavaScript 表白源码演示地址

2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)

3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)

4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)

5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)

6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐

7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)

8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备

9. 我是如何用一行代码表白学妹❤520情人节送女朋友的3D樱花雨相册礼物❤(程序员表白专属)

10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)

11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)

12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)

13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)

14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节

15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备

16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备

17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)

18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备

19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)

20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)

21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表

22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)

23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)

24. html+css+js制作520表白网页,全屏的爱心和表白语网页动画代码,浪漫的520爱心表白动画特效。

25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)

26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐

27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备

28. 520七夕情人节代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」

29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备

30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)

31.一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript

32.HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)

33.送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)

34.HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤

35.《520七夕情人节表白礼物》:虚幻浪漫的爱情故事——❤520表白星空漫漫3D相册❤(HTML+CSS+JavaScript)

36.HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)

37.《520七夕情人节表白》:制作属于我们的爱情相册网页(HTML+CSS+JavaScript)

38.师妹直呼“这也太哇塞了吧“ ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)

39.❤七夕情人节将至,用HTML+CSS给女朋友绘制一张彩色代码相册吧!

40.❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript

41.HTML5+CSS3实现非常有创意的生日蛋糕动画(含音乐)

42.HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)

43.最近分享一款抖音上很火的七夕节程序员表白页面_html5七夕表白放烟花动画特效

44.❤生日快乐网站模板HTML❤(精品制作)(HTML5+CSS3+JS)

上一篇:网站加入百度云加速后,出现Error520源站返回未知错误怎么办?


下一篇:平面点云的轮廓线计算-alpha shapes算法原理和实现