照片墙源码

Android控件PopupWindow模仿ios底部弹窗前⾔在H5⽕热的时代，许多框架都出了底部弹窗的控件，在H5被称为弹出菜单ActionSheet，今天我们也来模仿⼀个ios的底部弹窗，取材于苹果QQ的选择头像功能。

正⽂废话不多说，先来个今天要实现的效果图整个PopupWindow的开启代码private void openPopupWindow(View v) {//防⽌重复按按钮if (popupWindow != null && popupWindow.isShowing()) {return;}//设置PopupWindow的ViewView view = LayoutInflater.from(this).inflate(yout.view_popupwindow, null);popupWindow = new PopupWindow(view, youtParams.MATCH_PARENT,youtParams.WRAP_CONTENT);//设置背景,这个没什么效果，不添加会报错popupWindow.setBackgroundDrawable(new BitmapDrawable());//设置点击弹窗外隐藏⾃⾝popupWindow.setFocusable(true);popupWindow.setOutsideTouchable(true);//设置动画popupWindow.setAnimationStyle(R.style.PopupWindow);//设置位置popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);//设置消失监听popupWindow.setOnDismissListener(this);//设置PopupWindow的View点击事件setOnPopupViewClick(view);//设置背景⾊setBackgroundAlpha(0.5f);}步骤分析：PopupWindow的布局PopupWindow的创建PopupWindow添加动画效果PopupWindow设置背景阴影PopupWindow监听点击事件获取NavigationBar的⾼度PopupWindow的布局：在Layout中，设计我们需要的布局<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"><LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/popup_shape" android:orientation="vertical"><TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="你可以将照⽚上传⾄照⽚墙" android:textColor="#666" android:textSize="14sp" /><View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" /><TextView android:id="@+id/tv_pick_phone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="从⼿机相册选择" android:textColor="#118" android:textSize="18sp" /><View android:layout_width="match_parent" android:layout_height="0.1px" android:background="#888" /><TextView android:id="@+id/tv_pick_zone" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="从空间相册选择" android:textColor="#118" android:textSize="18sp" /></LinearLayout><LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="8dp" android:background="@drawable/popup_shape"><TextView android:id="@+id/tv_cancel" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="16dp" android:text="取消" android:textColor="#118" android:textSize="18sp" android:textStyle="bo </LinearLayout></LinearLayout>其效果是：PopupWindow的创建：这个创建与我们普通的控件创建⽅法是⼀样的//设置PopupWindow的ViewView view = LayoutInflater.from(this).inflate(yout.view_popupwindow, null);popupWindow = new PopupWindow(view, youtParams.MATCH_PARENT,youtParams.WRAP_CONTENT);PopupWindow添加动画效果：我们创建⼀个anim⽂件夹，创建我们的out和in动画效果，然后在style添加我们的动画<?xml version="1.0" encoding="utf-8"?><!--进⼊动画--><translate xmlns:android="/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="100%" android:toYDelta="0" android:duration="200"/><?xml version="1.0" encoding="utf-8"?><!--退出动画--><translate xmlns:android="/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="0" android:toYDelta="100%" android:duration="200"/><!--弹窗动画--><style name="PopupWindow"> <item name="android:windowEnterAnimation">@anim/window_in</item> <item name="android:windowExitAnimation">@anim/window_out</item> </style>//设置动画popupWindow.setAnimationStyle(R.style.PopupWindow);PopupWindow设置背景阴影：弹窗打开时设置透明度为0.5，弹窗消失时设置透明度为1//设置屏幕背景透明效果public void setBackgroundAlpha(float alpha) {youtParams lp = getWindow().getAttributes();lp.alpha = alpha;getWindow().setAttributes(lp);}PopupWindow监听点击事件：监听我们PopupWindow⾥⾯控件的点击事件//设置PopupWindow的View点击事件setOnPopupViewClick(view);private void setOnPopupViewClick(View view) {TextView tv_pick_phone, tv_pick_zone, tv_cancel;tv_pick_phone = (TextView) view.findViewById(_pick_phone);tv_pick_zone = (TextView) view.findViewById(_pick_zone);tv_cancel = (TextView) view.findViewById(_cancel);tv_pick_phone.setOnClickListener(this);tv_pick_zone.setOnClickListener(this);tv_cancel.setOnClickListener(this);}获取NavigationBar的⾼度：这⾥需要适配有些⼿机没有NavigationBar有些⼿机有，这⾥以存在NavigationBar来演⽰int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android"); navigationHeight = getResources().getDimensionPixelSize(resourceId);对存在NavigationBar的⼿机上，设置其PopupWindow的出现位置//设置位置 popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);对没有NavigationBar的⼿机上，设置其PopupWindow的出现位置//设置位置 popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, 0);源码public class MainActivity extends AppCompatActivity implements View.OnClickListener, PopupWindow.OnDismissListener {private Button bt_open;private PopupWindow popupWindow;private int navigationHeight;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(yout.activity_main);bt_open = (Button) findViewById(R.id.bt_open);bt_open.setOnClickListener(this);int resourceId = getResources().getIdentifier("navigation_bar_height", "dimen", "android");navigationHeight = getResources().getDimensionPixelSize(resourceId);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.bt_open:openPopupWindow(v);break;case _pick_phone:Toast.makeText(this, "从⼿机相册选择", Toast.LENGTH_SHORT).show();popupWindow.dismiss();break;case _pick_zone:Toast.makeText(this, "从空间相册选择", Toast.LENGTH_SHORT).show();popupWindow.dismiss();break;case _cancel:popupWindow.dismiss();break;}}private void openPopupWindow(View v) {//防⽌重复按按钮if (popupWindow != null && popupWindow.isShowing()) {return;}//设置PopupWindow的ViewView view = LayoutInflater.from(this).inflate(yout.view_popupwindow, null);popupWindow = new PopupWindow(view, youtParams.MATCH_PARENT,youtParams.WRAP_CONTENT);//设置背景,这个没什么效果，不添加会报错popupWindow.setBackgroundDrawable(new BitmapDrawable());//设置点击弹窗外隐藏⾃⾝popupWindow.setFocusable(true);popupWindow.setOutsideTouchable(true);//设置动画popupWindow.setAnimationStyle(R.style.PopupWindow);//设置位置popupWindow.showAtLocation(v, Gravity.BOTTOM, 0, navigationHeight);//设置消失监听popupWindow.setOnDismissListener(this);//设置PopupWindow的View点击事件setOnPopupViewClick(view);//设置背景⾊setBackgroundAlpha(0.5f);}private void setOnPopupViewClick(View view) {TextView tv_pick_phone, tv_pick_zone, tv_cancel;tv_pick_phone = (TextView) view.findViewById(_pick_phone);tv_pick_zone = (TextView) view.findViewById(_pick_zone);tv_cancel = (TextView) view.findViewById(_cancel);tv_pick_phone.setOnClickListener(this);tv_pick_zone.setOnClickListener(this);tv_cancel.setOnClickListener(this);}//设置屏幕背景透明效果public void setBackgroundAlpha(float alpha) {youtParams lp = getWindow().getAttributes();lp.alpha = alpha;getWindow().setAttributes(lp);}@Overridepublic void onDismiss() {setBackgroundAlpha(1);}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

淘宝装修模板代码教程大全(完整版)1)公告栏的装修图片代码,帖到公告栏就行了. 不过还是有好多人来问我公告栏的位置-----点我的淘宝-----管理我的店铺------基本设置，下面写着公告的位置。

<img src="图片的所在的地址"><img border="0" src="图片地址" />2).公告悬浮装饰图片代码，COPY到公告的最下面就好了哦，<IMG style="right: 5px; BOTTOM: 0px; POSITION: relative" src="你图片的地址">3)加背景音乐的代码。

进“我的淘宝”点击“管理我的店铺”进入“基本设置” 先贴代码，再写你的公告文字<bgsound src="你的背景音乐地址" loop=-1>4)浮动的图片的代码：</td></tr></table>;<img height="150" src="图片地址"5)滚动字幕代码：这个用处可就多了，放到哪里那些字都是会动的，有很多朋友在好评里都会用到哦！<marquee>输入你想说的话</marquee>6)自定义颜色代码<font color=blue>输入你想要说的话</font>注意:等于号"="后就是颜色的英文：不喜欢这个颜色还可以换成其他颜色的，如：red(红)、blue(蓝)、green(绿)等；不过注意代码的总长度不要超过40哦。

7)增加链接链接内容<a href="链接地址">链接内容</a>8)店铺分类的代码<img src=" 图片的地址" /> 代码就放在：我的淘简单介绍一下我的操作方法：1、选好喜欢的宝贝分类模板，复制保存之后，填上适当的文字，然后上传到网上相册；2、复制代码<img src=" 图片的地址" /> 到宝贝分类中；3、打开网上相册，选中相应的模板，右击属性，复制属性中的图片地址；4、由于网上的图片地址过长，因此要在/上进行网址缩短工作：即把复制的图片地址到这个网站中进行缩短，然后会出现一个较短的图片地址5、再用短地址放入<img src=" 图片的地址" /> 的""中就ok了9)如何在店铺公告添加个性的鼠标指针：马上copy这个代码，它可以让您的店铺公告更有吸引力呀<table style="CURSOR: url('上传后的鼠标指针的网址')"><tr><td><table border="0" style="TABLE-LAYOUT: fixed">10)宝贝描述加上个性的鼠标指针自己喜欢的鼠标指针选好了吗？那就马上复制这个代码在宝贝描述里就可以了，当然还要先选“编辑源文件”<table width="100%" style="CURSOR: url('这里是已上传的鼠标指针网址')"><tr><td width="100%">另外，还要在源文件底部输入代码：</td></tr></table>宝贝描述中都带有“店铺收藏”字样，但是最新的淘宝收藏夹变化了，导致了以前的方法不灵了，如何解决这个问题呢？把以前的代码换成如下即可解决这个问题：/popup/add_collection.htm?id=62323209&itemid=62323209&itemtype=0&ownerid=115d86206eeba2e9d827ef69ac80a71c&scjjc=2（欢迎大家点击这个链接看看我说的方法灵不灵啊，点击确定之后，到您自己的收藏夹里面看一眼，是不是我的店铺已经被您收藏了？^-^^-^ 呵呵^-^）别忘了把62323209&itemid=62323209&itemtype=0&ownerid=115d86206eeba2e9d827ef69ac80a71c&scjjc=2这个数字修改成您自己的店铺ID哦（不修改的，我热烈的欢迎啊，哈哈）如何获得自己的店铺ID呢？进入“我的淘宝”/“查看我的店铺”，会看到浏览器的地址栏中有类似下面的字样：/shop/view_shop.htm?nekot=c21pbGVfNWNt1281414248539&user_number_id=321589306 user_id=后面的那串数字就是您自己店铺的ID了，把这个ID COPY下了，替换上面的那个代码就可以在宝贝描述模板里面添加收藏店铺了！！12)添加音乐代码：百度音乐/搜索你想要的歌曲，记得要选连接速度快的。

炫酷照⽚墙，代码简单易懂还是在分享源代码之前，先晒⼀下照⽚原图是这样的，然后随便点⼀张⼩图它会慢慢的看似拼凑出点的那张图的⼤图】这⾥要注意，是慢慢拼凑出，⽽且再点击⼀下这个⼤图，这个⼤图⼜会慢慢分散成原来分散的⼩图⽚下⾯来看⼀下源代码html⽂件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>相册</title><style type="text/css">* {margin: 0;padding: 0}body {background-color: #e8e3da;}ul {list-style: none}#wrap {width: 980px;height: 500px;}#wrap li {position: absolute;left: 0;top: 0;transition: transform 1500ms ease-out;background-color: white;}.box {width: 100%;height: 100%;background-size: cover;transition: transform 1500ms ease-out;}.center {margin: auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;}</style><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">$(function () {var collums = 5;//列var rows = 5;//⾏var wrap = $('#wrap');var w = wrap.width() / rows;var h = wrap.height() / collums;for (var r = 0; r < rows; r++) {for (var c = 0; c < collums; c++) {$('<li><div class="box"></div></li>').width(w).height(h).css({'left': w * c + 'px','top': h * r + 'px','transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' + 'translateX(' + (30*c-60) + 'px)' +'translateY(' + (30*r-60) + 'px)'}).find('.box').css({'background-image': 'url(images/' + (r * collums + c) + '.jpg)','transform': 'scale(0.9)'}).end().appendTo(wrap)}}var change = true;wrap.find('li').on('click', function () {if (change == true) {var bgImg = $(this).find('div').css('background-image');var bgLeft = 0;var bgTop = 0;$('#wrap li').each(function (index) {var $this=$(this);$(this).delay(40*index).animate({"opacity":0},200, function () {$this.css({'transform': ' rotate(0deg) ' +'translateX(0)' +'translateY(0)'});$this.find('div').css({'background-image': bgImg,'background-size': 'auto','backgroundPositionX': -bgLeft,'backgroundPositionY': -bgTop,'transform': 'scale(1)'});bgLeft += 196;if (bgLeft >= 980) {bgTop += 100;bgLeft = 0;}$this.animate({"opacity":1},300);})});change = false;} else if (change == false) {$('#wrap li').each(function (index) {var c=index %collums;var r=parseInt(index/collums);var $this=$(this);$(this).delay(40*index).animate({"opacity":0},200, function () { $this.css({'transform': 'rotate(' + (Math.random() * 40 - 20) + 'deg)' + 'translateX(' + (30*c-60) + 'px)' +'translateY(' + (30*r-60) + 'px)'});$this.find('div').css({'background-image': 'url(images/' + index + '.jpg)','background-size': 'cover','transform': 'scale(0.9)'});$this.animate({"opacity":1},200);})});change = true;}})})</script></head><body><ul id="wrap" class="center"></ul></body></html>然后js是⽤的jQuery包图⽚的话，只截个图看⼀下吧你们也来试⼀下吧。

Gallery 3D 分析文章分类:移动开发Gallery 3D 分析yer 是个抽象类。

有5个变量，分别是mX;mY（位置坐标）;mWidth;mHeight（宽与高）;mHidden （是否隐藏）; 一个抽象方法，非抽象子类都有实现。

Java代码其他的可以在子类中重写有好几个类都继承了Layer抽象类：BackgroundLayerCanvasLayerGridLayerHudLayerLoadingLayerRootLayer其中用到的RenderView类Java代码里面有个静态final 类Lists里面定义了updateList，opaqueList，blendedList，hitTestList，systemList等以Layer为对象内容的ArrayList;以及一个清空所有ArrayList的方法Clear().Gallery 3D 代码分析之概览文章分类:移动开发Gallery 3D UI 非常炫，如下图所示：需要明确的几个问题伪2D 还是3D：gallery3d 基于android SDK OpenGL ES 接口开发，使用了Java API,没有使用NDK。

图片如何显示：在OpenGL ES 中，要显示图片，需要定义一个四边形，然后把图片当作texture 贴到四边形上。

布局及特效如何实现：这是gallery3d 的精华所在，需认真分析。

大数据量图片/cache 如何实现和管理：gallery3d 有缓冲区的设计，非常不错，需要认真分析。

动画引擎：简单的讲，动画引擎对外可表现为一个接口：Java代码即，给定初始值(initVal)，动画引擎根据逝去的时间(timeElapsed)和动画总时间（duration）计算下一帧对应的值(currentVal)，这个值可能是位置坐标，也可能是一个矩阵matrix，或者是其它的属性。

显示一帧就调用该函数更新actor的属性，各个帧连起来显示就成了动画。

任务介绍照片墙设计方案一、整体思路。

咱这个照片墙啊，就像是一本打开的生活故事集，每一张照片都是一个精彩的小章节。

首先呢，得确定一个主题，比如说“疯狂的岁月”，专门放那些特别逗趣、冒险或者难忘的瞬间照片；或者是“爱的旅程”，用来展示家人、朋友、恋人之间的温馨时刻。

二、布局设计。

1. 形状布局。

要是想简单又大气，可以来个长方形或者正方形的整体布局。

把照片整整齐齐地排列，就像训练有素的小士兵。

如果想要点创意，那就搞个心形布局呗，特别适合“爱的旅程”主题。

把最有爱的照片放在中间，就像心脏的位置，周围再一圈一圈地围上其他照片，越看越觉得心里暖烘烘的。

还有那种波浪形布局也超酷的。

照片高低错落，就像海浪一样，看着就很有动感。

这种布局适合那些充满活力、旅行主题的照片，看着照片就感觉像是在回忆一场场刺激的冒险。

2. 分组布局。

按照时间顺序分组是个很靠谱的办法。

比如说，左边这一组是“青涩少年时”，放着小时候那些傻愣愣但超级可爱的照片；中间一组是“热血青年期”，全是那些充满活力、参加各种活动的照片；右边一组是“成熟现在进行时”，展示现在优雅或者帅气的自己。

或者按照人物分组。

把家人的照片放在一块儿，朋友的照片放在另一块儿，恋人的照片单独弄个小角落，还可以在旁边贴上一些小纸条，写上和他们之间的趣事或者想说的话。

三、相框选择。

1. 风格。

如果是走复古风，那就选木质的相框，颜色深一点的那种，像是从老时光里走出来的。

要是现代简约风呢，白色或者黑色的简约金属相框就很合适，干净利落。

要是照片墙是在儿童房，那就可以用彩色的塑料相框，各种鲜艳的颜色，就像小朋友们五彩斑斓的梦一样。

2. 尺寸搭配。

不要所有相框都一样大，那多无趣啊。

大相框里放最重要、最有视觉冲击力的照片，比如说全家的大合影。

小相框就用来放一些特写或者有趣的小细节照片。

大小相框错落有致地排列，就像一场和谐的视觉交响乐。

四、照片选择与处理。

1. 选择。

首先肯定得选那些能让人看了就忍不住笑或者心里一暖的照片。

“一师一课，一课一名师”培训讲稿一、平台功能简介“一师一优课、一课一名师”的活动平台作为本次活动的主要阵地，是先进的教育信息技术与优质的数字教育资源紧密结合的纽带，也是各地教师队伍相互了解、研修探究、共同传播优秀教育资源的窗口。

依托国家教育资源公共服务平台强大的技术支持，为教师网上“晒课”和“优课”评选提供了便捷而稳定的通道。

平台栏目的设置，呈现了各地教师“晒课”的具体情况，有利于活动参与人员及时网罗和关注活动的相关信息。

本次活动产生的“优课”，及其它生成性的优质教育资源都将在平台上展示分享，这将为各地教研团队利用教育信息技术积极地、创造性地开展教研活动提供极大帮助，从而进一步推动信息技术和数字教育资源在中小学课堂教学中的合理有效应用和深度融合。

1、平台首页功能介绍●通过“导航栏”右侧的“注册”和“登录”可实现国家教育资源公共服务平台账号的注册和登录。

●“导航栏”上侧的“资源”、“晒课”“教研”、“话题”、“问答”等频道，是供教师和教研人员进行资源查找、网上“晒课”、网络教研、互动讨论、在线问答的活动专区。

●活动标识和名称右侧的“【全国】”按钮能够实现从当前页面到地方的切换，区域选择可具体至区、县。

●平台“首页”和“优课展示”、“各地进展”等栏目之间可点击切换，以查看相关栏目内容。

●已注册平台账号的用户点击右侧橙色的“我要晒课”按钮，可快捷跳转“晒课”界面，参与活动。

●“焦点图”通过点击切换，即可跳转至国家级培训专版或活动专题报道专版，查看相关内容。

●“通知通告”模块显示最新的相关活动信息。

2、活动流程和联系方式●本次活动包括“注册账号”、“活动报名”、“晒优课”和“优课遴选”四个基本活动流程。

●用户可通过扫描二维码、拨打咨询电话、添加公共 QQ 来获取本次活动的相关信息及帮助，并分享至微信、QQ 空间等个人社交平台，让更多的人了解和关注本次活动。

3、“晒课”教师照片墙系统随机展示“晒课”教师上传的个人照片，展示教师个人风采。

unity 照片墙扩散原理Unity是一款强大的游戏开发引擎，也被广泛应用于虚拟现实、增强现实和其他交互式应用程序的开发中。

其中一个常见的应用场景是创建照片墙扩散效果。

本文将介绍Unity照片墙扩散的原理和实现方法。

照片墙扩散效果是指当用户点击一张照片时，周围的照片会逐渐展开并填充整个屏幕，形成一个照片墙。

这种效果可以增加用户的交互体验，并且使界面更加生动有趣。

实现照片墙扩散效果的关键是将照片按照一定的规则排列在屏幕上，并在用户点击时进行动态扩散。

下面将介绍具体的实现步骤。

我们需要准备一些照片资源。

可以使用Unity提供的图片导入功能，将照片导入到项目中。

接下来，我们需要创建一个照片墙的容器，在Unity中可以使用空对象或者UI面板来实现。

将照片容器放置在游戏场景中合适的位置。

然后，我们需要将照片按照一定的规则排列在照片墙容器中。

可以使用网格布局或者自定义的布局算法来实现。

在Unity中，可以使用GridLayoutGroup组件或者编写脚本来实现。

通过调整照片的位置、大小和旋转角度，可以创建不同的照片墙排列效果。

接下来，我们需要为每张照片添加点击事件。

在Unity中，可以使用Button组件或者编写脚本来实现。

当用户点击某张照片时，我们需要获取该照片的位置信息，并将周围的照片进行动态扩散。

为了实现照片扩散效果，我们可以使用动画和缓动函数。

在Unity 中，可以使用Animator组件或者编写脚本来实现。

通过设置动画参数和缓动函数，可以实现照片的平移、缩放和旋转等动画效果。

可以根据需要调整动画的持续时间和缓动函数的参数，以达到理想的效果。

在动画过程中，我们可以根据点击的照片位置计算出周围照片的目标位置，并通过动画控制器来控制照片的扩散过程。

可以使用线性插值或者其他插值算法来平滑地过渡照片的位置。

通过逐步扩散照片的动画效果，可以实现照片墙的扩散效果。

我们可以添加一些额外的效果来增强照片墙的视觉效果。

纯css实现照⽚墙3D效果的⽰例代码本篇⽂章就是展⽰⼀个照⽚墙的效果。

所以废话不多说，直接上代码然后展⽰特效。

有兴趣的道友可以⾃⼰练练⼿试试。

直接上代码1.准备材料：准备材料就是没什么材料，⾃⼰⿇溜赶快的去：百度找⼏张美⼥的照⽚来测试即可。

2.html代码：<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>照⽚墙</title><link href="Content/index.css" rel="stylesheet" /></head><body><div class="container"><前端学习交流QQ群：461593224><!--美⼥的照⽚⾃⼰准备，⼩样的照⽚百度有 :)--><img class="img img1" src="img/1.jpg" /><img class="img img2" src="img/2.jpg" /><img class="img img3" src="img/3.jpg" /><img class="img img4" src="img/4.jpg" /><img class="img img5" src="img/5.jpg" /><img class="img img6" src="img/6.jpg" /><img class="img img7" src="img/7.jpg" /><img class="img img8" src="img/8.jpg" /><img class="img img9" src="img/9.jpg" /></div></body></html>3.CSS代码：* {margin:0;padding:0;}body {background-color:#eee;}.container {width:960px;height:450px;margin:60px auto;position:relative;}.img {/*宽度可以根据⾃⼰选择的照⽚内容⽽定*/width:150px;}.container img:hover {box-shadow:15px 15px 20px rgba(50,50,50,0.4);transform:rotate3d(1,1,1,180deg) scale(1.50);-webkit-transform:rotate3d(1,1,1,180deg) scale(1.50);-moz-transform:rotate3d(0deg,0deg,0deg) scale(1.50);-ms-transform:rotate3d(0deg,0deg,0deg) scale(1.50);/*本⾝图⽚的z-index是1，⿏标经过时候设置成2，那么这张图⽚就会"上来"*/z-index:2;}.container img {/*给照⽚加⼀个相框的效果*/padding: 10px 10px 15px;background-color: white;border: 1px solid #ddd;box-shadow: 2px 2px 3px rgba(50,50,50,0.4);/*渐出动画效果*/-moz-transition: all 0.5s ease-in;-o-transition: all 0.5s ease-in;-webkit-transition: all 0.5s ease-in;transition: all 0.5s ease-in;z-index: 1;}.img1 {left:400px;top:0;/*CSS3属性transform:旋转:rotate,缩放:scale,倾斜:skew */ transform:rotate(-5deg);/*-webkit代表chrome、safari私有属性*/-webkit-transform:rotate(-5deg);/*-moz代表firefox浏览器私有属性*/-moz-transform:rotate(-5deg);/*-ms代表IE浏览器私有属性*/-ms-transform:rotate(-5deg);}.img2 {left:600px;top:0;/*旋转⾓度可以根据⾃⼰的审美观定夺*/transform:rotate(-20deg);-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);-ms-transform:rotate(-20deg);}.img3 {bottom:0px;right:0;transform:rotate(5deg);-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);}.img4 {bottom:400px;left:300px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);}.img5 {bottom:0px;top:0;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-transform:rotate(-10deg);}.img6 {left:0px;top:0;transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);}.img7 {left:850px;top:0;transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);}.img8 {bottom:-20px;top:650px;transform:rotate(5deg);-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);}.img9 {left:550px;top:100px;transform:rotate(15deg);-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-ms-transform:rotate(15deg);}css代码的这些注释也是热乎的，⼤家可以⾃⼰看看，可以改动其中的⼀些属性多玩玩。

3d⽹红相册含源代码img中放照⽚css中含有⼀个sytle.cssstyle.css@charset "utf-8";*{margin:0;padding:0;}body{/*background: url(../img/preview.png) ;*/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(../img/01.png) no-repeat 0 0;-webkit-transform:translateZ(50px);}.minbox li:nth-child(2){background: url(../img/02.png) no-repeat 0 0;-webkit-transform:rotateX(180deg) translateZ(50px);}.minbox li:nth-child(3){background: url(../img/03.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px);}.minbox li:nth-child(4){background: url(../img/04.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px);}.minbox li:nth-child(5){background: url(../img/05.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px); }.minbox li:nth-child(6){background: url(../img/06.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px); }.maxbox li:nth-child(1){background: url(../img/1.png) no-repeat 0 0;-webkit-transform:translateZ(50px);}.maxbox li:nth-child(2){background: url(../img/2.png) no-repeat 0 0;-webkit-transform:translateZ(50px);}.maxbox li:nth-child(3){background: url(../img/3.png) no-repeat 0 0;-webkit-transform:rotateX(-90deg) translateZ(50px); }.maxbox li:nth-child(4){background: url(../img/4.png) no-repeat 0 0;-webkit-transform:rotateX(90deg) translateZ(50px); }.maxbox li:nth-child(5){background: url(../img/5.png) no-repeat 0 0;-webkit-transform:rotateY(-90deg) translateZ(50px); }.maxbox li:nth-child(6){background: url(../img/6.png) no-repeat 0 0;-webkit-transform:rotateY(90deg) translateZ(50px); }.maxbox{width: 800px;height: 400px;position: absolute;left: 0;top: -20px;-webkit-transform-style: preserve-3d;}.maxbox li{width: 200px;height: 200px;background: #fff;border:1px solid #ccc;position: absolute;left: 0;top: 0;opacity: 0.2;-webkit-transition:all 1s ease;}.maxbox li:nth-child(1){-webkit-transform:translateZ(100px);}.maxbox li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(100px); }.maxbox li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(100px); }.maxbox li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(100px); }.maxbox li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(100px); }.maxbox li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(100px); }.box:hover ol li:nth-child(1){-webkit-transform:translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(2){-webkit-transform:rotateX(180deg) translateZ(300px); width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(3){-webkit-transform:rotateX(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(4){-webkit-transform:rotateX(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}.box:hover ol li:nth-child(6){-webkit-transform:rotateY(90deg) translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}@keyframes move{0%{-webkit-transform: rotateX(13deg) rotateY(0deg);}100%{-webkit-transform:rotateX(13deg) rotateY(360deg);}}index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><link type="text/css" href="css/style.css" rel="stylesheet" /> </head><body><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></body></html>。

46款开源微博工具开源软件微博客平台 StatusNetStatusNet 的前身是 Laconica，是一个开源的微博客平台软件，采用 PHP开发。

StatusNet是个相当老牌的开源微博程序，相当多的国外微博网站都是基于它架设的。

不过StatusNet对于服务器的要求的确是多。

StatusNet的功能还是比较丰富的，除了微博必备的所有...更多StatusNet信息多媒体微博客平台 SharetronixSharetronix (blogtronix) 作为一个多媒体微博客平台，具备微博客必备的特性——相互关注、私信、收藏等，同时还具有内建的图片上传和视频分享（支持来自YouTube、MySpace、MetaCafe、Vimeo和Revver的视频）功能。

Sharetronix还拥有一套好友邀请系统，可以...更多Sharetronix信息微博客系统 Blurt.itBlurt.it是一个基于PHP/MySQL搭建的微博客系统，类似于Twitter。

用户可以在一个开放或私有的讨论群中与其他用户互交沟通。

此项目已改到这里。

更多Blurt.it信息微博客系统 LaconicaLaconica (音"luh-KAWN-ih-kuh")是一个微型博客系统，类似于twitter和叽歪网之类的东西Laconica 现在已经改名为StatusNet 使用Laconica 系统搭建的网站有：http://identi.ca/...更多Laconica信息微博客平台 JaikuEngineJaikuEngine是一个2007年被Google收购的微博客平台。

但是今年，Google决定在Google Code上将其完全开源。

JaikuEngine能够部署在Google AppEngine上，所以使用JaikuEngine 架设微博客社区可以说是一个完全免费的解决方案，您只需要拥有一个Google帐户，然后开...更多JaikuEngine信息微博客程序 EasyTalkEasyTalk 是一个国产的开源微博客程序，界面挺像饭否的，API接口也和饭否类似，基于PHP和MySQL。