抖音里面html相册代码大全,分享一下抖音上火的程序员女朋友相册代码

最新推荐文章于 2024-07-13 17:22:05 发布
最新推荐文章于 2024-07-13 17:22:05 发布
阅读量3.2k 收藏 8
点赞数 2
文章标签： 抖音里面html相册代码大全

抖音上火爆的3D旋转相册代码，纯H5写出来效果是这样的：

226b14266bba386da4fa8a4f33090019.png

鼠标移动上去裂变。

直接上代码

css部分：html{

background:linear-gradient(#FF6666 0%,#336699 20%);/*背景渐变颜色*/

height: 100%;

color:#99cc33;/*文字颜色*/

}

/*最外层容器样式*/

.wrap{

width: 200px;

height: 200px;

/*改变左右上下,图片方块移动*/

margin: 150px auto;

position: relative;

}

/*包裹所有容器样式*/

.cube{

width: 200px;

height: 200px;

margin: 0 auto;

transform-style: preserve-3d;

transform: rotateX(-30deg) rotateY(-80deg);

-webkit-animation: rotate 20s infinite;

/*匀速*/

animation-timing-function: linear;

}

@-webkit-keyframes rotate{

from{transform: rotateX(0deg) rotateY(0deg);}

to{transform: rotateX(360deg) rotateY(360deg);}

}

.cube div{

position: absolute;

width: 200px;

height: 200px;

opacity: 0.8;

transition: all .4s;

}

/*定义所有图片样式*/

.pic{

width: 200px;

height: 200px;

}

.cube .out_front{

transform: rotateY(0deg) translateZ(100px);

}

.cube .out_back{

transform: translateZ(-100px) rotateY(180deg);

}

.cube .out_left{

transform: rotateY(90deg) translateZ(100px);

}

.cube .out_right{

transform: rotateY(-90deg) translateZ(100px);

}

.cube .out_top{

transform: rotateX(90deg) translateZ(100px);

}

.cube .out_bottom{

transform: rotateX(-90deg) translateZ(100px);

}

/*定义小正方体样式

*/

.cube span{

display: bloack;

width: 100px;

height: 100px;

position: absolute;

top: 50px;

left: 50px;

}

.cube .in_pic{

width: 100px;

height: 100px;

}

.cube .in_front{

transform: rotateY(0deg) translateZ(50px);

}

.cube .in_back{

transform: translateZ(-50px) rotateY(180deg);

}

.cube .in_left{

transform: rotateY(90deg) translateZ(50px);

}

.cube .in_right{

transform: rotateY(-90deg) translateZ(50px);

}

.cube .in_top{

transform: rotateX(90deg) translateZ(50px);

}

.cube .in_bottom{

transform: rotateX(-90deg) translateZ(50px);

}

/*鼠标移入后样式*/

.cube:hover .out_front{

transform: rotateY(0deg) translateZ(200px);

}

.cube:hover .out_back{

transform: translateZ(-200px) rotateY(180deg);

}

.cube:hover .out_left{

transform: rotateY(90deg) translateZ(200px);

}

.cube:hover .out_right{

transform: rotateY(-90deg) translateZ(200px);

}

.cube:hover .out_top{

transform: rotateX(90deg) translateZ(200px);

}

.cube:hover .out_bottom{

transform: rotateX(-90deg) translateZ(200px);

}

.hovertreeinfo{text-align:center;}

.hovertreeinfo a{color:white}

html部分：html>

3D图片展览屋-抖音女朋友相册代码

html

{

overflow:visible;

-ms-touch-action: none;

-ms-content-zooming: none;

}

body

{

position: absolute;

margin: 0px;

padding: 0px;

background: #fff;

width: 100%;

height: 100%;

}

#canvas

{

position: absolute;

width: 100%;

height: 100%;

background: #fff;

}

/*

* ==============================================================

* CANVAS 3D experiment -

* http://keleyi.com/

* Author Gerard Ferrandez - 7 June 2010

* ------------------------------------------------------------

* Javascript released under the MIT license

* http://keleyi.com

* Last updated: 12 Dec 2012

* ===============================================================

*/

"use strict";

(function () {

/* ==== definitions ==== */

var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1, 2],

// ---- poly constructor ----

Poly = function (parent, face) {

this.parent = parent;

this.ctx = ctx;

this.color = face.fill || false;

this.points = [];

if (!face.img) {

// ---- create points ----

for (var i = 0; i 

this.points[i] = new ge1doot.transform3D.Point(

parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),

parent.pc.y + face.y[i],

parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)

);

}

this.points[3].next = false;

}

},

// ---- diapo constructor ----

Diapo = function (path, img, structure) {

// ---- create image ----

this.img = new ge1doot.transform3D.Image(

this, path + img.img, 1, {

isLoaded: function (img) {

img.parent.isLoaded = true;

img.parent.loaded(img);

}

}

);

this.visible = false;

this.normalX = img.nx;

this.normalZ = img.nz;

// ---- point center ----

this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);

// ---- target positions ----

this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);

this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);

// ---- create polygons ----

this.poly = [];

for (var i = -1, p; p = structure[++i]; ) {

layers[i] = (p.img === true ? 1 : 2);

this.poly.push(

new Poly(this, p)

);

}

},

// ---- init section ----

init = function (json) {

// draw poly primitive

Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;

// ---- init screen ----

scr = new ge1doot.Screen({

container: "canvas"

});

ctx = scr.ctx;

scr.resize();

// ---- init pointer ----

pointer = new ge1doot.Pointer({

tap: function () {

if (camera.over) {

if (camera.over === camera.target.elem) {

// ---- return to the center ----

camera.target.x = 0;

camera.target.z = 0;

camera.target.elem = false;

} else {

// ---- goto diapo ----

camera.target.elem = camera.over;

camera.target.x = camera.over.tx;

camera.target.z = camera.over.tz;

// ---- adapt tesselation level to distance ----

for (var i = 0, d; d = diapo[i++]; ) {

var dx = camera.target.x - d.pc.x;

var dz = camera.target.z - d.pc.z;

var dist = Math.sqrt(dx * dx + dz * dz);

var lev = (dist > 1500) ? quality[0] : quality[1];

d.img.setLevel(lev);

}

}

}

}

});

// ---- init camera ----

camera = new ge1doot.transform3D.Camera({

focalLength: Math.sqrt(scr.width) * 10,

easeTranslation: 0.025,

easeRotation: 0.06,

disableRz: true

}, {

move: function () {

this.over = false;

// ---- rotation ----

if (pointer.isDraging) {

this.target.elem = false;

this.target.ry = -pointer.Xi * 0.01;

this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);

} else {

if (this.target.elem) {

this.target.ry = Math.atan2(

this.target.elem.pc.x - this.x,

this.target.elem.pc.z - this.z

);

}

}

this.target.rx *= 0.9;

}

});

camera.z = -10000;

camera.py = 0;

// ---- create images ----

for (var i = 0, img; img = json.imgdata[i++]; ) {

diapo.push(

new Diapo(

json.options.imagesPath,

img,

json.structure

)

);

}

// ---- start engine ---- >>>

setInterval(function () {

quality = (fps > 50) ? [2, 3] : [1, 2];

fps = 0;

}, 1000);

run();

},

// ---- main loop ----

run = function () {

// ---- clear screen ----

ctx.clearRect(0, 0, scr.width, scr.height);

// ---- camera ----

camera.move();

// ---- draw layers ----

for (var k = -1, l; l = layers[++k]; ) {

light = false;

for (var i = 0, d; d = diapo[i++]; ) {

(l === 1 && d.draw()) ||

(d.visible && d.poly[k].draw());

}

}

// ---- cursor ----

if (camera.over && !pointer.isDraging) {

scr.setCursor("pointer");

} else {

scr.setCursor("move");

}

// ---- loop ----

fps++;

requestAnimFrame(run);

};

/* ==== prototypes ==== */

Poly.prototype.draw = function () {

// ---- color light ----

var c = this.color;

if (c.light || !light) {

var s = c.light ? this.parent.light : 1;

// ---- rgba color ----

light = "rgba(" +

Math.round(c.r * s) + "," +

Math.round(c.g * s) + "," +

Math.round(c.b * s) + "," + (c.a || 1) + ")";

ctx.fillStyle = light;

}

// ---- paint poly ----

if (!c.light || this.parent.light 

// ---- projection ----

for (

var i = 0;

this.points[i++].projection();

);

this.drawPoly();

ctx.fill();

}

}

/* ==== image onload ==== */

Diapo.prototype.loaded = function (img) {

// ---- create points ----

var d = [-1, 1, 1, -1, 1, 1, -1, -1];

var w = img.texture.width * 0.5;

var h = img.texture.height * 0.5;

for (var i = 0; i 

img.points[i] = new ge1doot.transform3D.Point(

this.pc.x + (w * this.normalZ * d[i]),

this.pc.y + (h * d[i + 4]),

this.pc.z + (w * this.normalX * d[i])

);

}

}

/* ==== images draw ==== */

Diapo.prototype.draw = function () {

// ---- visibility ----

this.pc.projection();

if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {

// ---- light ----

this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;

// ---- draw image ----

this.visible = true;

this.img.draw();

// ---- test pointer inside ----

if (pointer.hasMoved || pointer.isDown) {

if (

this.img.isPointerInside(

pointer.X,

pointer.Y

)

) camera.over = this;

}

} else this.visible = false;

return true;

}

return {

// --- load data ----

load: function (data) {

window.addEventListener('load', function () {

ge1doot.loadJS(

"res/imageTransform3D.js",

init, data

);

}, false);

}

}

})().load({

imgdata: [

// north

{img: 'imgs/1.jpg', x: -1000, y: 0, z: 1500, nx: 0, nz: 1 },

{ img: 'imgs/2.jpg', x: 0, y: 0, z: 1500, nx: 0, nz: 1 },

{ img: 'imgs/3.jpg', x: 1000, y: 0, z: 1500, nx: 0, nz: 1 },

// east

{img: 'imgs/4.jpg', x: 1500, y: 0, z: 1000, nx: -1, nz: 0 },

{ img: 'imgs/5.jpg', x: 1500, y: 0, z: 0, nx: -1, nz: 0 },

{ img: 'imgs/6.jpg', x: 1500, y: 0, z: -1000, nx: -1, nz: 0 },

// south

{img: 'imgs/7.jpg', x: 1000, y: 0, z: -1500, nx: 0, nz: -1 },

{ img: 'imgs/8.jpg', x: 0, y: 0, z: -1500, nx: 0, nz: -1 },

{ img: 'imgs/9.jpg', x: -1000, y: 0, z: -1500, nx: 0, nz: -1 },

// west

{img: 'imgs/10.jpg', x: -1500, y: 0, z: -1000, nx: 1, nz: 0 },

{ img: 'imgs/11.jpg', x: -1500, y: 0, z: 0, nx: 1, nz: 0 },

{ img: 'imgs/12.jpg', x: -1500, y: 0, z: 1000, nx: 1, nz: 0 }

],

structure: [

{

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [-1001, -490, -490, -1001],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [-501, 2, 2, -500],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [0, 502, 502, 0],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// wall

fill: { r: 255, g: 255, b: 255, light: 1 },

x: [490, 1002, 1002, 490],

z: [-500, -500, -500, -500],

y: [500, 500, -500, -500]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-420, 420, 420, -420],

z: [-500, -500, -500, -500],

y: [150, 150, -320, -320]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-20, 20, 20, -20],

z: [-500, -500, -500, -500],

y: [250, 250, 150, 150]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-20, 20, 20, -20],

z: [-500, -500, -500, -500],

y: [-320, -320, -500, -500]

}, {

// shadow

fill: { r: 0, g: 0, b: 0, a: 0.2 },

x: [-20, 20, 10, -10],

z: [-500, -500, -100, -100],

y: [-500, -500, -500, -500]

}, {

// base

fill: { r: 32, g: 32, b: 32 },

x: [-50, 50, 50, -50],

z: [-150, -150, -50, -50],

y: [-500, -500, -500, -500]

}, {

// support

fill: { r: 16, g: 16, b: 16 },

x: [-10, 10, 10, -10],

z: [-100, -100, -100, -100],

y: [300, 300, -500, -500]

}, {

// frame

fill: { r: 255, g: 255, b: 255 },

x: [-320, -320, -320, -320],

z: [0, -20, -20, 0],

y: [-190, -190, 190, 190]

}, {

// frame

fill: { r: 255, g: 255, b: 255 },

x: [320, 320, 320, 320],

z: [0, -20, -20, 0],

y: [-190, -190, 190, 190]

},

{ img: true },

{

// ceilingLight

fill: { r: 255, g: 128, b: 0 },

x: [-50, 50, 50, -50],

z: [450, 450, 550, 550],

y: [500, 500, 500, 500]

}, {

// groundLight

fill: { r: 255, g: 128, b: 0 },

x: [-50, 50, 50, -50],

z: [450, 450, 550, 550],

y: [-500, -500, -500, -500]

}

],

options: {

imagesPath: ""

}

});

你的浏览器不支持HTML5画布技术，请使用支持HTML5的浏览器

银河屯田地球捕鱼
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
国仁老猫：怎么制作抖音100W播放量的作品；首选需要精准定位。
公众号：国仁猫哥
09-30 500
前几天学员小张问了猫哥这样一个问题： 小张：猫哥，我想要制作一篇点赞超过百万的短视频，应该从何下手呢？ 猫哥：你想做什么类型的内容呢？把你的抖音账号发来我看看？ 小张：我还没有账号，不过那些不重要，我做出来内容之后发的时候再弄就行。 后来了解到，小张在一家线上教育公司上班，做的是视频剪辑的工作，领导下达了一个任务让小张去做短视频，小张认为做好短视频内容最重要，所以来找猫哥咨询如何制作点赞百万的抖音短视频。 做短视频内容固然重要，但是小张忽略了更加重要的一点：账号定位。 接下来咱们就来好好聊一聊这个事情。 首
HTML5 3D立体图片相册代码.zip
07-04
HTML5 3D立体图片相册代码是一款超炫HTML5 canvas 3D立体图片相册幻灯片效果代码。
使用html实现图片相册展示设计
liulang68的博客
03-29 1231
【代码】使用html实现图片相册展示设计。
抖音程序员女朋友相册源代码
03-08
抖音程序员女朋友相册源代码，实现鼠标移动放大，双层正方形旋转展示图片。可以更换img文件夹内图片，但是大小需要自行修改，外层图片大小为400*400px，内层为100*100px
前端HTML+CSS实现3D炫酷相册（附源码）
最新发布
2302_81141145的博客
07-13 482
利用基础的html和css实现3D相册（可自我添加照片）本人初衷是为了验证所学的知识，顺便想逗女朋友开心😊（如若作为礼物送人还是有点low的）各位码友尽可提出疑问，在下定尽自己的绵薄之力，共同进步（还望各位码友一键三连支持一下，在此谢过了)废话完毕，直接上源码：（CV即可）
程序员给女友做的3D相册（源码）
12-04
一个高大上的HTML5作品,是利用HTML5制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!
程序员给女朋友用HTML5制作的3D相册免费(附源码)
04-28
一个高大上的HTML5作品,是利用HTML5 canvas制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!源码下载:CSDN下载频道或来自ypxyangyangyang的整理。...
程序员送给女友的基于JavaScript的高端3D相册源码.zip
06-22
程序员送给女友的基于JavaScript的高端3D相册源码。 介绍 简单替换个人照片，实现高端3D相册 软件架构 JavaScript 使用说明 下载代码到本地电脑 替换成自己的照片 点击index.html运行 程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码
js 女朋友相册
11-22
程序员为女朋友写的js 3D相册，立体多角度展示你女朋友图片 喜欢的可以收藏
抖音上火起来的来的撩妹神器.zip_hidetz9_site:en.pudn.com_抖音_撩妹神奇抖音_神器
07-15
标题中的“抖音上火起来的来的撩妹神器.zip_hidetz9_site:en.pudn.com_抖音_撩妹神奇抖音_神器”暗示我们这是一款在抖音平台上流行的应用或技术，可能是一个互动式的表白工具，利用编程或者软件设计来实现浪漫的表白...
最新怕上火喝王老吉广告词大全完整版共2页.pdf.zip
12-01
很抱歉，根据您提供的信息，标题和描述似乎与IT行业知识并不直接相关，它们提到的是一个广告词大全的PDF文件，通常这属于市场营销或广告学的范畴。不过，我可以假设这里可能是在寻求如何在IT环境下处理或利用这样的...
《Python编程》源代码文件
12-07
这个压缩包大约有12M的大小，里面包含了丰富的示例代码，旨在帮助读者更好地理解和掌握Python编程。 Python是一种广泛使用的解释型、面向对象的编程语言，以其简洁明了的语法和强大的功能深受程序员喜爱。源代码...
HTML+css+js网页相册大全
03-15
里面有七个女朋友相册效果，每个效果都是不同的，十分漂亮。里面的照片可以更换，也可以加背景音乐。不会使用的可以私信我。
程序员给女朋友用HTML5制作的3D相册
04-23
很多人看到之后都在找源码，这里为大家找到，程序员给女朋友用HTML5制作的3D相册
抖音3d旋转相册代码css-3d.rar
11-18
抖音3d旋转相册代码，需要的可以下载，不过博客里面都贴了的，自己整理下就可以的。抖音3d旋转相册代码，需要的可以下载，不过博客里面都贴了的，自己整理下就可以的。
2019最新抖音运营推广策划方案.pdf
10-04
其次，了解什么样的内容能在抖音上火。尽管有很多热门玩法和总结，但核心是符合抖音的slogan——"记录美好生活"。内容应具备美感、潮流、年轻化的特点，以满足抖音用户的需求。内容的真实性和对用户生活的正面影响是...
android grallery 炫酷3d图片,3D旋转炫酷相册(纯css实现)
weixin_42635064的博客
05-28 532
【实例简介】【实例截图】【核心代码】@charset "utf-8";*{margin:0;padding:0;}@keyframes move{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;}100%{transform:rotateX(720deg) rotateY(360deg) rotateZ(360deg);}}body{...
程序员圣诞节相册源码_程序员的浪漫-动态相册源码
weixin_39943000的博客
12-01 348
<style> *{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; } body{ background:#1e1e1f; overflow:hidden; ...
眼干上火吃什么水果，下火
04-04
1. 梨：梨具有清热润肺、生津止渴的功效，可以缓解眼干上火的症状。 2. 西瓜：西瓜含有丰富的水分和维生素C，可以帮助降温、清热解毒，缓解眼干上火引起的不适。 3. 柚子：柚子富含维生素C，具有清热解毒、润肺...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值