精华内容
下载资源
问答
  • 炫酷相册android资源

    2016-05-26 10:11:33
    炫酷相册是一款非常炫酷的、最好用的相册。 轻松管理手机和平板上所有照片和图片。 一个好用的相册,时间轴、专辑相册、城市相册,幻灯片、gif动画、照片备注,拍照就能记日记 一个飞快的相册,启动快,加载快,浏览...
  • 用HTML5的炫酷相册

    2016-04-24 22:11:10
    挺酷炫的html5相册
  • 炫酷相册表白代码

    千次阅读 2021-05-04 13:33:17
    女朋友炫酷照片墙 电脑桌面新建一个txt文本,复制粘贴下面的html代码,保存后修改文件后缀为html,双击就可以看到页面了。但是这只有音乐和文字,因为这只是html代码,css和js代码需要去我的资源下载或者加我QQ...

    更多表白效果–>>html表白代码大全(14个效果)
    生日祝福效果请看其他文章:炫酷相册生日祝福代码
    本文效果(gif动图形式):
    在这里插入图片描述
    也可以通过视频看看效果—>>>html+css+js给女朋友写一个照片墙
    要实现这个效果需要html+css+js,可以更改里面的照片、文字和背景音乐。

    完整项目下载地址—>>>女朋友炫酷照片墙
    只有下面的代码是无法运行的,需要去我的资源下载完整项目,里面有完整的使用说明。
    在这里插入图片描述

    部分代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>你怎么这么好看</title>
    <!--引入开始-->
    <link rel="stylesheet" href="css/slider-wb.css">
    <style>
    html {
    	overflow: hidden;
    	-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;
    }
    </style>
    <script src="analytics.js" async=""></script><script src="js/ge1doot.js"></script>
    <script>
    "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 < 4; 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 ----
    			);
    		}
    	},
    	// ---- 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
    
    		// ---- 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 < 1) {
    			// ---- 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 < 4; 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(
    					"js/imageTransform3D.js",
    					init, data
    				);
    			}, false);
    		}
    	}
    })().load({
    	imgdata:[
    		// north
    		{img:'Images/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
    		{img:'Images/2.jpg', x:0,     y:0, z:1500, nx:0, nz:1},
    		{img:'Images/3.jpg', x:1000,  y:0, z:1500, nx:0, nz:1},
    		// east
    		{img:'Images/4.jpg', x:1500,  y:0, z:1000, nx:-1, nz:0},
    		{img:'Images/5.jpg', x:1500,  y:0, z:0, nx:-1, nz:0},
    		{img:'Images/6.jpg', x:1500,  y:0, z:-1000, nx:-1, nz:0},
    		// south
    		{img:'Images/7.jpg', x:1000,  y:0, z:-1500, nx:0, nz:-1},
    		{img:'Images/8.jpg', x:0,     y:0, z:-1500, nx:0, nz:-1},
    		{img:'Images/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
    		// west
    		{img:'Images/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
    		{img:'Images/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
    		{img:'Images/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: ""
    	}
    });
    </script>
    <script src="imageTransform3D.js"></script>
    <!--引入结束-->
    <style>
    body{margin:0; padding:0;}
    </style>
    </head>	
    <body oncontextmenu='return false' ondragstart='return false'>
    <!-- 代码开始 -->
    <b style="  position:absolute;
      width: 70%;
    top:10%;
    left:15%;
      text-align: center;
      transform:translateY(-50%);
      font-family: 'Love Ya Like A Sister', cursive;
      font-size: 40px;
    z-index:100;
      color: #e16531;
      padding: 0 20px;">有人说,人的一生会遇到2920万人,而两个人相爱的概率只有0.000049。在这茫茫人海中,两个人能相遇就值得感激,能相爱更是一种难得。所以,我很庆幸上天让我遇见了你。</b>
    
    <audio autoplay="autoplay" loop="loop" preload="auto"
                src="http://music.163.com/song/media/outer/url?id=1827600686.mp3">       
    </audio>
    <canvas style="cursor: move;" height="933" width="1920" id="canvas">你的浏览器不支持HTML5画布技术,请使用谷歌浏览器。</canvas>
    <!-- end of dhteumeuleu nav menu -->
    <div style="position: absolute; top: 20px; right: 20px;z-index:100">
    <style type="text/css">
    .Qg{height: 30px;}
    .iI {
        background: url(/misc-res/images/share.png) no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
        display: inline-block;
        height: 16px;
        margin-bottom: 3px;
        vertical-align: middle;
        width: 16px;
    }
    .jI {
        margin-left: 2px;
        color: #000000;
    }
    .RF{
      float: left;
    }
    
    .Dg {
        background-color: #FFFFFF;
        border: 1px solid #D9D9D9;
        border-radius: 3px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
        cursor: pointer;
        float: left;
        height: 28px;
        line-height: 28px;
        margin-left: 8px;
        outline: medium none;
        padding: 0 10px;
        transition: background-color 0.218s ease 0s, border-color 0.218s ease 0s, box-shadow 0.218s ease 0s;
        width: auto;
    }.RF {
        border-radius: 0 0 3px;
        height: 100%;
        line-height: 30px;
        outline: medium none;
        overflow: hidden;
        padding-left: 7px;
        padding-right: 16px;
        position: relative;
    }
    .IH {
        display: inline-block;
        max-width: 200px;
    }.JH {
        display: inline-block;
        margin-right: 4px;
        margin-top: 1px;
    }
    .ho {
        border-radius: 2px;
    }
        </style>
         
        </div></div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/ga.js"></script>
    <!-- 代码结束 -->
    </div>
    </body>
    </html>
    

    完整项目地址—>>>女朋友炫酷照片墙

    html表白代码大全(14个效果)

    展开全文
  • Android 炫酷相册源码

    2015-03-17 21:56:36
    java图片管理程序 Android
  • 一个绝对让你下载了就不后悔的JQUERY特效的相册
  • ( Android 炫酷相册源码

    2015-06-14 12:22:30
    ( Android 炫酷相册源码
  • h5 + js 炫酷相册

    千次阅读 2019-11-29 15:43:27
    昨晚看抖音,看别别人用h5和js简简单单就做好了一个很炫酷的页面,照片旋转起来,看起来很酷,我今天没有什么事,就简单的查找了一下资料,最后的成果展示一下: 我觉得还是很帅的,我喜欢科比布莱恩特,所以就搞...

    昨晚看抖音,看别别人用h5和js简简单单就做好了一个很炫酷的页面,照片旋转起来,看起来很酷,我今天没有什么事,就简单的查找了一下资料,最后的成果展示一下:

    我觉得还是很帅的,我喜欢科比布莱恩特,所以就搞了很多张科比的高清图片来旋转。

    嗯。。。看起来还是那么帅!

    学习完了,不忘把成果分享一下,这个页面不知道拿来撩做前端的小姐姐会不会有效果。。。

    后来,我发现这个其实可以加点音乐也可以加点特效等浪漫元素。

    于是,我又添加了下面一段代码:

        <audio id="music" loop="loop" autoplay="autoplay">
            <source src="img/bg.mp3" type="audio/mpeg">
        </audio>
    
        <canvas></canvas>
        <div id="container" class="container"></div>
    
        <script s
    展开全文
  • 表白女神炫酷相册.zip

    2021-05-10 17:58:13
    炫酷又好看的表白相册,女生看了都无法拒绝,堪称表白神器!
  • Android 炫酷相册源码.rar
  • Android源码——炫酷相册源码.zip
  • 安卓Android源码——炫酷相册源码.zip
  • Android源码——炫酷相册源码.7z
  • Jquery 动态3D相册炫酷相册大全 专心为女友定制版 含各种动态相册技术 3d展示为主
  • 炫酷相册源码.zip
  • 非常酷的效果,兼容性良好,可直接移植,非JQ代码,纯JS编写
  • 炫酷FLASH个人相册

    2019-11-03 10:01:13
    炫酷FLASH个人相册 炫酷FLASH个人相册 炫酷FLASH个人相册
  • 炫酷相册代码生日祝福 这个项目直接下载,然后解压,双击里面的html文件即可看到效果了,目前只支持在电脑预览效果;如果需要在手机上看到效果可以做完之后放在我服务器上,我给你一个链接就可以通过手机访问了。 ...

    gif动图效果:
    在这里插入图片描述

    由于gif只能展示部分效果,你可以通过视频查看效果–>>完整效果请看视频
    可以更改里面的照片、生日倒计时和背景音乐,需要代做的直接私信我即可。
    完整项目地址–>>炫酷相册代码生日祝福
    这个项目直接下载,然后解压,双击里面的html文件即可看到效果了,目前只支持在电脑预览效果;如果需要在手机上看到效果可以做完之后放在我服务器上,我给你一个链接就可以通过手机访问了。

    里面有详细的使用说明,会教你如何修改(照片,音乐,生日等等)
    在这里插入图片描述
    核心代码:

    <script>
    "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 < 4; 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);
    	};
    	
    				Math.round(c.g * s) + "," + 
    				Math.round(c.b * s) + "," + (c.a || 1) + ")";
    			ctx.fillStyle = light;
    		}
    		// ---- paint poly ----
    		if (!c.light || this.parent.light < 1) {
    			// ---- 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 < 4; 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(
    					"js/imageTransform3D.js",
    					init, data
    				);
    			}, false);
    		}
    	}
    })().load({
    	imgdata:[
    		// north
    		{img:'Images/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
    		{img:'Images/2.jpg', x:0,     y:0, z:1500, nx:0, nz:1},
    		{img:'Images/3.jpg', x:1000,  y:0, z:1500, nx:0, nz:1},
    		// east
    		{img:'Images/4.jpg', x:1500,  y:0, z:1000, nx:-1, nz:0},
    		{img:'Images/5.jpg', x:1500,  y:0, z:0, nx:-1, nz:0},
    		{img:'Images/6.jpg', x:1500,  y:0, z:-1000, nx:-1, nz:0},
    		// south
    		{img:'Images/7.jpg', x:1000,  y:0, z:-1500, nx:0, nz:-1},
    		{img:'Images/8.jpg', x:0,     y:0, z:-1500, nx:0, nz:-1},
    		{img:'Images/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
    		// west
    		{img:'Images/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
    		{img:'Images/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
    		{img:'Images/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: ""
    	}
    });
    </script>
    

    上述代码只是核心代码,完整项目需要去下载。
    完整项目地址–>>炫酷相册代码生日祝福

    展开全文
  • Threejs-相册炫酷.zip

    2019-08-26 16:22:26
    这是一个可以变成圆柱体,平面,平行的超炫酷相册模版。主要使用three.js来实现的这样的炫酷效果。
  • 纯CSS3制作炫酷的3D相册 整体效果如下所示: 整体代码如下所示: html中的代码 <!... <...meta name="viewport" content="width=device-width, initial-scale=1.0">...3D炫酷相册</title>

    纯CSS3制作炫酷的3D相册

    整体效果如下所示:
    在这里插入图片描述
    整体代码如下所示:
    html中的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D炫酷相册</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <div class="cube">
                <!-- 外面立方体开始 -->
                <div class="out_front">
                    <img src="img/1.jpg" class="out_pic"/>
                </div>
                <div class="out_back">
                    <img src="img/2.jpg" class="out_pic"/>
                </div>
                <div class="out_left">
                    <img src="img/3.jpg" class="out_pic"/>
                </div>
                <div class="out_right">
                    <img src="img/4.jpg" class="out_pic"/>
                </div>
                <div class="out_top">
                    <img src="img/5.jpg" class="out_pic"/>
                </div>
                <div class="out_bottom">
                    <img src="img/6.jpg" class="out_pic"/>
                </div>
                <!-- 外面立方体结束 -->
                <!-- 里面立方体开始 -->
                <div class="in_front" id="small">
                    <img src="img/7.jpg" class="in_pic"/>
                </div>
                <div class="in_back" id="small">
                    <img src="img/8.jpg" class="in_pic"/>
                </div>
                <div class="in_left" id="small">
                    <img src="img/9.jpg" class="in_pic"/>
                </div>
                <div class="in_right" id="small">
                    <img src="img/10.jpg" class="in_pic"/>
                </div>
                <div class="in_top" id="small">
                    <img src="img/11.jpg" class="in_pic"/>
                </div>
                <div class="in_bottom" id="small">
                    <img src="img/12.jpg" class="in_pic"/>
                </div>
                <!-- 里面立方体结束 -->
            </div>
        </div>
    </body>
    </html>
    

    css中的代码

    *{
        margin: 0;
        padding: 0;
    }
    :root,body{
        height: 100%;
        width: 100%;
        background-color: black;
    }
    /* 最外层容器样式 */
    .container{
        width: 200px;
        height: 200px;
        position: absolute;
        perspective: 2000px;
        /* 调整视距 */
        top: calc(50% - 100px);
        left: calc(50% - 100px);
        /* 垂直水平居中 */
    }
    /*立方体容器样式*/
    .cube{
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        animation: roddy 10s linear infinite;
    	/*设置动画匀速重复*/
    }
    @keyframes roddy{
    	0%{transform: rotateX(0deg) rotateY(0deg);}
    	100%{transform: rotateX(360deg) rotateY(360deg);}
    }
    .cube div{
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        /* 设置透明度 */
        transition: all 0.4s;
        /* 过渡动画 */
    }
    /* 外面照片大小设置 */
    .out_pic{
        width: 200px;
        height: 200px;
    }
    .cube .out_front{
    	transform: rotateY(0deg) translateZ(100px);
    }
    .cube .out_back{
    	transform: rotateY(180deg) translateZ(100px);
    }
    .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 #small{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50px;
    }
    /* 里面照片大小设置 */
    .in_pic{
        width: 100px;
        height: 100px;
    }
    
    .cube .in_front{
    	transform: rotateY(0deg) translateZ(50px);
    }
    .cube .in_back{
    	transform: rotateY(180deg) translateZ(50px) ;
    }
    .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: rotateY(180deg) translateZ(200px);
    }
    .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);
    }
    

    下面是详细的制作过程

    ①搭建项目基础的布局

    html中的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D炫酷相册</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <div class="cube">
                <!-- 外面立方体开始 -->
                <div class="out_front">
                    <img src="img/1.jpg" class="out_pic"/>
                </div>
                <div class="out_back">
                    <img src="img/2.jpg" class="out_pic"/>
                </div>
                <div class="out_left">
                    <img src="img/3.jpg" class="out_pic"/>
                </div>
                <div class="out_right">
                    <img src="img/4.jpg" class="out_pic"/>
                </div>
                <div class="out_top">
                    <img src="img/5.jpg" class="out_pic"/>
                </div>
                <div class="out_bottom">
                    <img src="img/6.jpg" class="out_pic"/>
                </div>
                <!-- 外面立方体结束 -->
                <!-- 里面立方体开始 -->
                <div class="in_front" id="small">
                    <img src="img/7.jpg" class="in_pic"/>
                </div>
                <div class="in_back" id="small">
                    <img src="img/8.jpg" class="in_pic"/>
                </div>
                <div class="in_left" id="small">
                    <img src="img/9.jpg" class="in_pic"/>
                </div>
                <div class="in_right" id="small">
                    <img src="img/10.jpg" class="in_pic"/>
                </div>
                <div class="in_top" id="small">
                    <img src="img/11.jpg" class="in_pic"/>
                </div>
                <div class="in_bottom" id="small">
                    <img src="img/12.jpg" class="in_pic"/>
                </div>
                <!-- 里面立方体结束 -->
            </div>
        </div>
    </body>
    </html>
    

    css中的代码

    *{
        margin: 0;
        padding: 0;
    }
    :root,body{
        height: 100%;
        width: 100%;
        background-color: black;
    }
    /* 最外层容器样式 */
    .container{
        width: 200px;
        height: 200px;
        position: absolute;
        top: calc(50% - 100px);
        left: calc(50% - 100px);
    }
    /*立方体容器样式*/
    .cube{
        width: 200px;
        height: 200px;
    }
    
    .cube div{
        position: absolute;
        width: 200px;
        height: 200px;
    }
    /* 外面照片大小设置 */
    .out_pic{
        width: 200px;
        height: 200px;
    }
    
    .cube #small{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50px;
    }
    /* 里面照片大小设置 */
    .in_pic{
        width: 100px;
        height: 100px;
    }
    

    浏览器运行结果如下:
    在这里插入图片描述

    ②搭建3D空间,并给出合适的视距

    css代码如下

    .container{
        perspective: 2000px;
    }
    .cube{
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
    }
    
    .cube .out_front{
    	transform: rotateY(0deg) translateZ(100px);
    }
    .cube .out_back{
    	transform: rotateY(180deg)translateZ(100px);
    }
    .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 .in_front{
    	transform: rotateY(0deg) translateZ(50px);
    }
    .cube .in_back{
    	transform: rotateY(180deg) translateZ(50px) ;
    }
    .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);
    }
    

    浏览器运行结果如下
    在这里插入图片描述

    ③添加动画并设置为匀速重复运动

    css代码如下

    .cube{
        animation: roddy 10s linear infinite;
    	/*匀速重复*/
    }
    @keyframes roddy{
    	0%{transform: rotateX(0deg) rotateY(0deg);}
    	100%{transform: rotateX(360deg) rotateY(360deg);}
    }
    

    ④设置最外层立方体的透明度,并添加一个hover伪类

    css代码如下

    .cube div{
    	opacity: 0.8;
    	transition: all 0.4s;
    }
    
    /*鼠标移入后样式*/
    .cube:hover .out_front{
    	transform: rotateY(0deg) translateZ(200px);
    }
    .cube:hover .out_back{
    	transform: rotateY(180deg) translateZ(200px);
    }
    .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);
    }
    
    展开全文
  • 主要为大家详细介绍了CSS3制作酷炫的三维相册效果的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 炫酷3D相册

    2013-06-27 22:12:26
    可用的3D相册,直接可用。查看图片,简单的图片游览器 效果很炫!
  • 文档和演示 总览 这是由 2开发的图像滑块,即用即可提供20酷转换。 产品特点 特征 描述 React灵敏 滑块和图像适合容器以始终填充 兼容性 受所有主要浏览器支持 可扩展的 您可以轻松添加自定义过渡 ... :i
  • 超炫html相册

    2016-08-12 18:23:55
    微信签到背景墙
  • 这是一款炫酷相册动画合集,集合了粒子、雪花、气泡、蝴蝶心形路径、星星、相册翻页等效果,有需要的可以点击下方名称链接下载。 效果图 炫酷相册动画合集 整理不易,欢迎大家交流学习。 ...
  • 制作这个炫酷相册一共需要12张图照片,内层和外层分别六张。 放照片的时候,照片命名一定要遵从以下三点 1、内层照片命名格式为01.png、02.png等等,一共六张,外层照片命名格式为1.png、2.png等,一共六张。 2、内...
  • 炫酷旋转相册----使用html书写。附全部源代码】

    千次阅读 多人点赞 2020-11-20 18:21:02
    图片素材已经上传到资源里面,需要的朋友可以去下载。更改图片即可显示你女朋友的照片哦!...炫酷旋转相册</title> <style> body { margin:0; background:#000; } #wrap
  • css3制作炫酷动画相册

    2020-05-08 16:09:17
    2.这里我使用的是网络图片,想制作属于自己相册的小伙伴们,可以新建img文件夹,在css样式中,将背景土拍你路径替换为自己的图片就好啦; 3.下面就开始贴代码咯;先来看看效果图(有三个动画效果); 4.基础html...
  • 该资源是将选择的照片经过代码编写成相册形式展现在页面上,可以当做女朋友的专属相册展示。用于表白是不错的选择
  • 程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这...本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,083
精华内容 833
关键字:

炫酷相册