HTML5照片晾衣绳效果（HTML5）

来源：互联网发布：javascript用vs6.0编写编辑：程序博客网时间：2024/06/05 12:47

HTML5的很多效果都很悬，尤其实现一些动态、3D的效果很酷。

因为兴趣，所以自己做了一个照片晾在晾衣绳上的效果，当然其实我的最终目的不是做这个，但是一点一点的学习、积累、实现吧。

源码如下，比较简单。

<!DOCTYPE HTML><html><head><style type="text/css">#package{height:200px;width: 650px;background-image: url("background.png");background-repeat: none;padding-left: 300px;margin-top:300px;}#package img{-webkit-transform-origin: top left;-webkit-transform: perspective(900px) rotate(30deg) skew(0,30deg);-webkit-transition: all 0.3s ease-in-out;background: #fff;box-shadow: 2px 0px 5px grey;margin-left: -40px;vertical-align:top;border: 5px solid #fff;/* -moz-transition-property: width; Firefox 4         -webkit-transition-property:width;  Safari 和 Chrome         -o-transition-property:width;  Opera */}#package img:hover{-webkit-transform: perspective(0) rotateY(-10deg) scale(1.2);margin: 0 90px 0 0px;pointer:hand;}</style></script></head><body><div id="package" ><img src="1.png" width="60" height="80"  /><img src="2.png" width="80" height="50"  /><img src="3.png" width="80" height="80"  /><img src="4.png" width="100" height=60" /><img src="5.png" width="50" height="80"  /><img src="6.png" width="80" height="80"  /><img src="7.png" width="80" height="60"  /><img src="8.png" width="80" height="80" /><img src="9.png" width="80" height="80" /></div></body></html>

背景图片就是一个晾衣绳而已。

据说transform目前IE 还未支持哈，俺觉得不用理会，以后肯定会支持的，因为HTML5太强大啦。

里面的1.png to 9.png，自己找图片吧，俺是用来晒俺家小baby的照片的，所以不就在这里给出来了。

PS：我在纠结绳子穿过图片的那种真实效果，希望有人能给予指导。欢迎讨论。

0 0