3d照片墙的制作方法如下:
工具:联想小新Air 13 Pro
系统:windows 10
软件:PPT 2017
1、打开PPT,执行insert-picture命令,选择一组要插入的图片,统一设置大小。
2、执行ctrl a全选,执行一键对齐递进命令,选择对齐增强命令,点击默认参数确定按钮。
3、执行ctrl g将它们组合在一起,右键从下拉菜单中选择设置图片格式的选项。
4、切换到3D旋转,选择右侧透视,将透视设置为70,将x旋转设置为330。
5、切换到3D格式选项卡,深度设置为5点,切换到阴影选项卡,透明度为88%。
6、最后执行三底垂直移位命令,在d出的对话框中直接按回车键,每次按回车键都会自动改变一次。
看完下面的代码你就明白了,稍作删改就是你要的效果<!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/htmlcharset=gb2312" />
<title>jQuery心型图片墙鼠标悬浮变大</title>
<style type="text/css">
*{padding:0margin:0}
ul,li{list-style:none}
body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serifbackground:#CCC}
.heartPic{width:749pxheight:630pxmargin:60px auto 0 auto}
.heartPic ul{float:leftwidth:749px}
.heartPic ul li{float:leftwidth:100pxheight:100pxpadding:2pxcursor:pointer}
.heartPic ul li.on{z-index:99}
.heartPic ul li.on .in{position:relativeleft:-50pxtop:-50pxpadding:5px 5px 20px 5pxbackground:#666}
.heartPic ul li .pTxt{display:nonewidth:100pxheight:15pxtext-align:centercolor:#fffoverflow:hidden}
.heartPic .showDiv{display:block}
</style>
</head>
<body>
<div class="heartPic">
<ul>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg" />
<p class="pTxt">可爱的女娃娃</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" />
<p class="pTxt">呆萌的小熊</p>
</div>
</li>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" />
<p class="pTxt">卡哇伊的小熊</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" />
<p class="pTxt">女巫骑着扫帚</p>
</div>
</li>
<li></li>
</ul>
<ul>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" />
<p class="pTxt">女娃娃</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" />
<p class="pTxt">星星可爱</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" />
<p class="pTxt">呆萌女</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" />
<p class="pTxt">狗狗</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" />
<p class="pTxt">绿树</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" />
<p class="pTxt">粉爱粉爱的</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" />
<p class="pTxt">蜡笔小新</p>
</div>
</li>
</ul>
<ul>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" />
<p class="pTxt">震不碎的心</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" />
<p class="pTxt">很有意境</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" />
<p class="pTxt">樱木花道最爱啊</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" />
<p class="pTxt">俩骷髅</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" />
<p class="pTxt">萌妹子</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" />
<p class="pTxt">可爱的小狗</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" />
<p class="pTxt">夫妇俩白头偕老</p>
</div>
</li>
</ul>
<ul>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" />
<p class="pTxt">刷子</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" />
<p class="pTxt">偶的头像</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" />
<p class="pTxt">树叶子</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" />
<p class="pTxt">星星</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg" />
<p class="pTxt">浅色哦</p>
</div>
</li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg" />
<p class="pTxt">太阳帅哥</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" />
<p class="pTxt">大笑脸</p>
</div>
</li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg" />
<p class="pTxt">企鹅</p>
</div>
</li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li>
<div class="in">
<img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg" />
<p class="pTxt">小兔子</p>
</div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".heartPic li").hover(function(){
$(this).addClass("on")
$(this).find("img").animate({"width":"200px","height":"200px"})
$(this).find("div").animate({"width":"200px","height":"200px"})
$(this).find(".pTxt").animate({"width":"200px","height":"20px"})
$(this).find("p").addClass("showDiv")
},function(){
$(this).animate({height:"100px"},100).removeClass("on")
$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"})
$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"})
$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"})
})
})
</script>
<div style="text-align:centerclear:both">
</div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)