一年一度的/520/七夕情人節/女朋友生日/程式員表白,是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實作3D立體動態相冊，趕緊學會了，來制作屬于我們程式員的浪漫吧！
?七夕情人節表白[櫻花飄落3D相冊],程式員也可以很浪漫哦 ! 程式員向妹子表白專用代碼!?
HTML+css3+js 抖音很火的3d旋轉相冊-包含音樂,(送女友,表白,生日)動態生成效果,這樣制作的~,現在,越來越多的人喜歡用視頻記錄生活,照片多的友友也會選擇制作動態相冊視頻,不僅創意十足,同時還能展現自我風采, 撩妹神器哦!
? 櫻花雨3D相冊(含背景音樂)
在線演示地址
? 加點螢火蟲金光閃閃的效果??
在線演示地址
? 圣誕節?(雪花飄落)3D相冊(含背景音樂)
原文原始碼地址
在線演示地址
動態效果圖(已兼容 H5移動端 和 pc端 )
里面配置了MP3音樂檔案, 可自行替換你喜歡的MP3,免費下載教程下面有
H5移動端
PC 電腦端
靜態大圖效果展示
? 旋轉3D流星雨相冊(可旋轉/拖拽/滾動-含音樂)
在線演示地址
制作不易,需要原始碼請添加 qq 365392777
?助力程式員撩妹手到擒來? html+css+js 煙花表白(含音樂)可自定義編輯文字
在線演示地址
? 元旦節/跨年夜?(照片墻)3D相冊/含背景音樂/可自定義文字 具有多種相冊圖形變化
在線演示地址
? 元旦節/跨年夜?(滿天星空)3D相冊/含背景音樂/可自定義文字 具有背景顏色漸變
在線演示地址
3d相冊制作教程
需要12張圖片, 1-6 圖片是大圖 400400 ,01-06 圖片是小圖 100100
將準備好的圖片,自行替換images 檔案中的圖片即可
美圖秀秀(電腦版)裁剪圖片
在線裁剪圖片鏈接
MP3 免費下載
mp3免費下載
如需更換mp3 背景音樂,可自行下載更換即可…
?解決上線問題> (不需要服務器就能免費部署上線)部署上線工具(永久可用)
不需要買服務器就能部署線上,全世界都能訪問你的連接啦, 這里給大家推薦一個程式員必備軟體 ,
插件集成了超級多好用的插件，免費下載安裝，簡單易懂, 簡直神器
1.部署流程
2.連接成功
將你寫好的頁面部署上線后, 全世界的人都可以愉快的訪問到你的網頁了(永久免費使用哦)
? 如何免費下載素材網原始碼?
素材免費下載教程當我學會這招,所有好看的炫酷的特效網頁(含原始碼)都能下載下來啦~~需要教程的滴滴
包括各種前端插件、圖片展示、文字效果、以及整站模板等
看到漂亮的網站還在充錢下載嗎? 遇到漂亮炫酷的3D影片不會寫而煩惱嗎? 我來幫你解決
你所能看到的漂亮的網頁,炫酷3D,特效,影片,專案站 都可以免費下載(含原始碼):需要的滴滴
不信你就來…
簡單舉例下面的幾個素材網…
素材網1
素材網2
素材網3
素材網4
素材網5
素材網6
素材網7
素材網8
素材網9
隨便找一個素材下載吧
什么情況, 居然需要q幣, 或者積分? 需要充值???
點擊下載代碼需要 q幣?, 需要積分?
1.我們開始下載教程吧
2.下載成功
3.下載后的代碼檔案目錄
4.打開編輯器運行 或者 雙擊打開html檔案
試試能不能跑吧
5.成功運行
發現地址運行在本地哦
就這樣一個炫酷的網頁就下載好了
? -------------------- 好了廢話不多說 上正題 >>>>櫻花雨3D相冊代碼如下--------------------
? 櫻花雨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);
}
....
完整代碼可滴滴 : 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);
};
...
完整代碼可滴滴 : 365392777
更多演示
? Html5+canvas 愛情樹表白影片模板代碼 (含背景音樂)
在線演示地址
? html5+canvas生日快樂文字煙花背景影片特效
在線演示地址
? html+js+css生日快樂
在線演示地址
? 流星3D相冊
在線演示地址
? 抖音超火?羅盤時鐘(免費附原始碼)
在線演示地址
? 前端 零基礎 入門到高級 (視頻+原始碼+開發軟體+學習資料+面試題) 一整套
? 表白原始碼
? 其他素材原始碼
? 特效
? 100套 Echart 圖表原始碼
100套 Echart 圖表原始碼在線演示地址
一萬年太長，和你在一起，只爭朝夕，
情書給你一封，情話給你一句，余生給你一人，
我想要的未來，就是每天早上起床，都能看見你和陽光都在，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245228.html
標籤：其他
上一篇：sessionStorage localStorage cookie 的區別
下一篇：使用原生Js實作隨機點名