圣誕節快到了，是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實作3D立體動態相冊，趕緊學會了，來制作屬于我們程式員的浪漫吧！
?圣誕節表白3D相冊,在圣誕節前夜, 我們的留言區開放給你！快來秀出你的別樣表白方式，和你心儀的那個ta表白吧！?
HTML+css+js 抖音很火的3d旋轉相冊-包含音樂,(送女友,表白,生日)動態生成效果,這樣制作的~,現在,越來越多的人喜歡用視頻記錄生活,照片多的友友也會選擇制作動態相冊視頻,不僅創意十足,同時還能展現自我風采, 撩妹神器哦!
? 圣誕節?(雪花飄落)3D相冊(含背景音樂)
在線演示
動態效果圖(已兼容 H5移動端 和 pc端 )
里面配置了MP3音樂檔案, 可自行替換你喜歡的MP3,免費下載教程下面有
H5移動端
?櫻花雨3D相冊(含背景音樂)
櫻花雨3D相冊->原始碼地址
在線演示
3D相冊制作教程
需要12張圖片, 1-6 圖片是大圖 400400 ,01-06 圖片是小圖 100100
將準備好的圖片,自行替換images 檔案中的圖片即可
美圖秀秀(電腦版)裁剪圖片
在線裁剪圖片鏈接
MP3 免費下載
mp3免費下載地址
如需更換mp3 背景音樂,可自行下載更換即可…
檔案目錄
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代碼
<script>
var RENDERER = {
SNOW_COUNT: {
INIT: 100,
DELTA: 1
},
BACKGROUND_COLOR: 'hsl(%h, 50%, %l%)',
INIT_HUE: 180,
DELTA_HUE: 0.1,
init: function() {
this.setParameters();
this.reconstructMethod();
this.createSnow(this.SNOW_COUNT.INIT * this.countRate, true);
this.render();
},
setParameters: function() {
this.$window = $(window);
this.$container = $('#jsi-snow-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.center = {
x: this.width / 2,
y: this.height / 2
};
this.countRate = this.width * this.height / 500 / 500;
this.canvas = $('<canvas />').attr({
width: this.width,
height: this.height
}).appendTo(this.$container).get(0);
this.context = this.canvas.getContext('2d');
this.radius = Math.sqrt(this.center.x * this.center.x + this.center.y * this.center.y);
this.hue = this.INIT_HUE;
this.snows = [];
},
reconstructMethod: function() {
this.render = this.render.bind(this);
},
createSnow: function(count, toRandomize) {
for (var i = 0; i < count; i++) {
this.snows.push(new SNOW(this.width, this.height, this.center, toRandomize));
}
},
render: function() {
requestAnimationFrame(this.render);
this.createSnow(this.SNOW_COUNT.DELTA, false);
}
};
var SNOW = function(width, height, center, toRandomize) {
this.width = width;
this.height = height;
this.center = center;
this.init(toRandomize);
};
SNOW.prototype = {
RADIUS: 20,
OFFSET: 4,
INIT_POSITION_MARGIN: 20,
COLOR: 'rgba(255, 255, 255, 0.8)',
TOP_RADIUS: {
MIN: 1,
MAX: 3
},
SCALE: {
INIT: 0.04,
DELTA: 0.01
},
DELTA_ROTATE: {
MIN: -Math.PI / 180 / 2,
MAX: Math.PI / 180 / 2
},
THRESHOLD_TRANSPARENCY: 0.7,
VELOCITY: {
MIN: -1,
MAX: 1
},
LINE_WIDTH: 2,
BLUR: 10,
init: function(toRandomize) {
this.setParameters(toRandomize);
this.createSnow();
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];
box.style.left = '42%';
}
},
setParameters: function(toRandomize) {
if (!this.canvas) {
this.radius = this.RADIUS + this.TOP_RADIUS.MAX * 2 + this.LINE_WIDTH;
this.length = this.radius * 2;
this.canvas = $('<canvas />').attr({
width: this.length,
height: this.length
}).get(0);
this.context = this.canvas.getContext('2d');
}
this.topRadius = this.getRandomValue(this.TOP_RADIUS);
var theta = Math.PI * 2 * Math.random();
this.deltaRotate = this.getRandomValue(this.DELTA_ROTATE);
this.scale = this.SCALE.INIT;
this.deltaScale = 1 + this.SCALE.DELTA * 500 / Math.max(this.width, this.height);
this.rotate = 0;
if (toRandomize) {
for (var i = 0, count = Math.random() * 1000; i < count; i++) {
this.x += this.vx;
this.y += this.vy;
this.scale *= this.deltaScale;
this.rotate += this.deltaRotate;
}
}
},
getRandomValue: function(range) {
return range.MIN + (range.MAX - range.MIN) * Math.random();
},
createSnow: function() {
this.context.clearRect(0, 0, this.length, this.length);
var angle60 = Math.PI / 180 * 60,
sin60 = Math.sin(angle60),
cos60 = Math.cos(angle60),
threshold = Math.random() * this.RADIUS / this.OFFSET | 0,
rate = 0.5 + Math.random() * 0.5,
offsetY = this.OFFSET * Math.random() * 2,
offsetCount = this.RADIUS / this.OFFSET;
for (var i = 0; i < 6; i++) {
this.context.save();
this.context.rotate(angle60 * i);
for (var j = 0; j <= threshold; j++) {
var y = -this.OFFSET * j;
this.context.moveTo(0, y);
this.context.lineTo(y * sin60, y * cos60);
}
for (var j = threshold; j < offsetCount; j++) {
var y = -this.OFFSET * j,
x = j * (offsetCount - j + 1) * rate;
}
}
this.context.stroke();
this.context.restore();
},
render: function(context) {
context.save();
}
};
$(function() {
RENDERER.init();
});
</script>
...
制作不易, 需要完整代碼請聯系我qq 365392777
對于程式員來說，“單身”依然是人生最大的 bug，關鍵是還無法除錯，雖然俗話說“自古英雄多寂寞”，但是缺少另一半的人生總是不完整的，況且，距離一年一度的情（虐）人（狗）節不遠了，
更多原始碼地址
1.?女朋友生日? HTML+css3+js 實作抖音炫酷櫻花3D相冊 (含背景音樂)程式員表白必備
2.echart在線演示地址
3.基于 Echarts 實作可視化資料大屏回應式展示效果的原始碼，共計100套，可以在此基礎上重新開發(vue/react)都可以使用
4.[前端開發神器]->不需要服務器就能將專案部署上線
5.?前端 html+css+js[1000個超炫酷特效] 當我學會這招,所有炫酷的特效頁面(含原始碼)都能下載下來啦!
6.抖音超火?羅盤時鐘(免費附原始碼)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/239069.html
標籤：其他