怎么在网页里给三维空间中的元素添加灯光效果？_随笔

不论是在动画场景还是网页游戏页面中，光影效果对三维场景来说十分重要，直接关系到用户的体验效果。可以去百度搜索一下秒秒学，里面的Flash的HTML5开发教程就有带你一起学习如何在网页三维场景中添加灯光，使上节制作的旋转的正方体显得更为立体真实。利用编程，可以轻松实现。

你需要一款简单易用的幻灯片演示制作工具，比如Focusky，这个软件支持输出多种格式，包括HTML/*.EXE/*.ZIP/*.APP/视频/PDF/H5等，应用很方便。

如何利用Focusky制作简易的HTML5幻灯片？有2种方式，一种是自定义创建幻灯片内容，一种是直接套用模板编辑制作，简单易上手，推荐使用。打开软件，登录账号，选择合适的幻灯片模板进行套用，替换模板原有内容，设置动画特效，就可以输出HTML5幻灯片。

另外，Focusky在演示上还支持3D幻灯片演示特效，可以打破传统的PPT切换方式，只需加入生动酷炫的3D镜头缩放、旋转和平移特效就可以使幻灯片像3D电影般播放，给人以视觉冲击感。

html5可以使用代码实现的简单幻灯片，并且能用鼠标滚轮滚动进行换页。

具体代码如下：

<!doctype html>

<html>

<head>

<style>

#slides{

position:absolute

left:0px

top:0px

height:100%

width:100%

overflow:hidden

}

.slide{

position:absolute

height:600px

width:800px

opacity:0.7

background-color:rgba(0, 128, 196, 0.5) !important

background-color:#ccc

border-radius:10px

left:50%

top:50%

margin-top:-300px

box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5)

transition:all 0.25s ease-in-out 0s

}

.current{

opacity:1

margin-left:-400px

}

.future{

margin-left:450px

transform: skew(-3deg) scale(0.8)

-webkit-transform: skew(-3deg) scale(0.8)

}

.post{

margin-left:-1250px

transform: skew(3deg) scale(0.8)

-webkit-transform: skew(3deg) scale(0.8)

}

.far-future{

margin-left:1200px

transition:none

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6300222.html

怎么在网页里给三维空间中的元素添加灯光效果？

发表评论

评论列表（0条）