用html+css+js实现3D表白网页(一)

闲暇时间,把自己的一些资料整理一下,这里展示的是一个3D的立体相册页面,因为是动态的相册,整体一直在缓慢逆时针旋转,截图只能展示静态的,看起来没实际效果那么美观。用html+css+js实现3D表白网页(一)_第1张图片
每隔几秒中间会跳出一张前置图片,有点惊喜感,如下图所示:

整个相册一共由200张小图片做成背景,一张大图片为前置图片,因为文件数量有点多,这里展示部分代码
sphere.html



		
致青春
"utf-8">
"viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
"stylesheet" href="css/index.css">
"stylesheet" href="css/animate.min.css">


    
    
    
    
    
    

    
"container">
"info">致青春
"menu">
"show_info animated" style="display:none;">
"info_my"> "img/cc.png" />
"info_mem">
"nickname">鞠婧祎
"id">ID:女神
"vote">性别:
"intro">当岁月老去,我依然记得曾经夕阳下我们美好的誓言! ,你的过去我来不及参与,你的未来我奉陪到底.

有个需要注意的地方就是小图片不用在乎尺寸,但是前置图片需要255*255像素的正方形图片,不过用电脑自带的图片编辑就可以改尺寸。

你可能感兴趣的:(前端,css,html)