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

其他 2020-12-24 01:44:22 阅读次数: 0

圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❤七夕情人节表白[樱花飘落3D相册],程序员也可以很浪漫哦 ! 程序员向妹子表白专用代码!❤
HTML+css3+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!

❤樱花雨3D相册(含背景音乐)

在线演示

在这里插入图片描述

❉ 圣诞节❉(雪花飘落)3D相册(含背景音乐)

源码地址
在线演示
在这里插入图片描述

动态效果图(已兼容 H5移动端 和 pc端 )

里面配置了MP3音乐文件, 可自行替换你喜欢的MP3,免费下载教程下面有

H5移动端

在这里插入图片描述

PC 电脑端

在这里插入图片描述

静态大图效果展示

在这里插入图片描述

❤ 旋转3D流星雨相册(可旋转/拖拽/滚动-含音乐)

❤流星雨在线演示

在这里插入图片描述

制作不易,需要源码请添加 qq 365392777

❤助力程序员撩妹手到擒来❤ html+css+js 烟花表白(含音乐)可自定义编辑文字

点击查看源码地址
在这里插入图片描述

3d相册制作教程

需要12张图片, 1-6 图片是大图 400400 ,01-06 图片是小图 100100

将准备好的图片,自行替换images 文件中的图片即可
在这里插入图片描述

美图秀秀(电脑版)裁剪图片

在这里插入图片描述
在线裁剪图片链接

MP3 免费下载

mp3免费下载
如需更换mp3 背景音乐,可自行下载更换即可…

❤重点>(解决)免费-部署上线工具(永久可用)

不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备软件 , 需要教程联系我
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器

部署流程在这里插入图片描述
连接成功,所有的人都可以愉快的访问到你的网页了(永久免费使用哦)

在这里插入图片描述

❤(重点)网上所有素材网页, 我都可以帮您下载下来, 需要教程的联系我哦

素材免费下载教程: 当我学会这招,所有好看的炫酷的特效网页(含源码)都能下载下来啦!

在这里插入图片描述
包括各种前端插件、图片展示、文字效果、以及整站模板等
看到漂亮的网站还在充钱下载吗? 遇到漂亮炫酷的3D动画不会写而烦恼吗? 我来帮你解决
你所能看到的漂亮的网页,炫酷3D,特效,动画,项目站 我都能帮你下载(含源码):需要教程的联系我
不信你就来…

简单举例下面的几个素材网…
素材网1
素材网2
素材网3
素材网4
素材网5
素材网6
素材网7
素材网8
素材网9

随便找一个素材下载吧

在这里插入图片描述
什么情况, 居然需要q币, 或者积分? 需要充值???

点击下载代码需要 q币?, 需要积分?
在这里插入图片描述

我们开始下载教程吧

在这里插入图片描述

下载成功

在这里插入图片描述

下载后的文件目录

在这里插入图片描述

打开编辑器运行 或者 双击打开html文件

试试能不能跑吧
在这里插入图片描述

成功运行

发现地址运行在本地哦
在这里插入图片描述
就这样一个炫酷的网页就下载好了

樱花雨3D相册代码如下

文件目录

在这里插入图片描述

代码

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <link type="text/css" href="./css/style.css" rel="stylesheet" />
    <style>
      html,
      body {
     
     
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      .container {
     
     
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <audio autoplay="autopaly">
      <source src="renxi.mp3" type="audio/mp3" />
    </audio>
    <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>
  <script>
  ....
 </script>
  </body>
</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: 42%;
	margin-top: 22%;
	-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(../images/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
    
    
	background: url(../images/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
    
    
	background: url(../images/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
    
    
	background: url(../images/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
    
    
	background: url(../images/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
    
    
	background: url(../images/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
    
    
	background: url(../images/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
    
    
	background: url(../images/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
    
    
	background: url(../images/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
    
    
	background: url(../images/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
    
    
	background: url(../images/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
    
    
	background: url(../images/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
....
   制作不易,  需要完整代码请联系我qq 365392777

樱花(樱花飘落) js代码

      var RENDERER = {
    
    
        INIT_CHERRY_BLOSSOM_COUNT: 30,
        MAX_ADDING_INTERVAL: 10,

        init: function() {
    
    
          this.setParameters();
          this.reconstructMethods();
          this.createCherries();
          this.render();
          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];
            console.log(box, '移动端');
            box.style.marginTop = '65%';
          }
        },
        setParameters: function() {
    
    
          this.$container = $('#jsi-cherry-container');
          this.width = this.$container.width();
          this.height = this.$container.height();
          this.context = $('<canvas />')
            .attr({
    
     width: this.width, height: this.height })
            .appendTo(this.$container)
            .get(0)
            .getContext('2d');
          this.cherries = [];
          this.maxAddingInterval = Math.round(
            (this.MAX_ADDING_INTERVAL * 1000) / this.width
          );
          this.addingInterval = this.maxAddingInterval;
        },
        reconstructMethods: function() {
    
    
          this.render = this.render.bind(this);
        },
        createCherries: function() {
    
    
          for (
            var i = 0,
              length = Math.round(
                (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
              );
            i < length;
            i++
          ) {
    
    
            this.cherries.push(new CHERRY_BLOSSOM(this, true));
          }
        },
        render: function() {
    
    
          requestAnimationFrame(this.render);
          this.context.clearRect(0, 0, this.width, this.height);

          this.cherries.sort(function(cherry1, cherry2) {
    
    
            return cherry1.z - cherry2.z;
          });
          for (var i = this.cherries.length - 1; i >= 0; i--) {
    
    
            if (!this.cherries[i].render(this.context)) {
    
    
              this.cherries.splice(i, 1);
            }
          }
          if (--this.addingInterval == 0) {
    
    
            this.addingInterval = this.maxAddingInterval;
            this.cherries.push(new CHERRY_BLOSSOM(this, false));
          }
        }
      };
      var CHERRY_BLOSSOM = function(renderer, isRandom) {
    
    
        this.renderer = renderer;
        this.init(isRandom);
      };
    ...
  制作不易,  需要完整代码请联系我qq 365392777

完整代码下载

制作不易, 需要源码的朋友 可以添加 qq 365392777

更多演示

❤ Html5+canvas网页电子版爱情表白动画模板代码(献给你爱的他/她)- 包含背景音乐

在线演示地址
在这里插入图片描述

(赠) html5+canvas生日快乐文字烟花背景动画特效

在线演示地址
在这里插入图片描述

(赠) 3D生日 源码一份

在线演示地址

在这里插入图片描述

流星3D相册

在线演示
在这里插入图片描述

抖音超火❤罗盘时钟(免费附源码)

在线演示地址
在这里插入图片描述

制作不易, 需要源码的朋友,请添加 qq 365392777

前端入门到高级教学-资料(包含视频教程)

在这里插入图片描述

表白源码

在这里插入图片描述

其他素材源码

在这里插入图片描述

特效

在这里插入图片描述

100套 Echart 图表源码

100套 Echart 图表源码在线演示地址 

制作不易, 需要源码的朋友 添加qq 365392777

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

一万年太长，和你在一起，只争朝夕。
情书给你一封，情话给你一句，余生给你一人。
我想要的未来，就是每天早上起床，都能看见你和阳光都在。

猜你喜欢

转载自blog.csdn.net/qq316148300/article/details/110792575
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022