html3D网页实例

妖狐艹你老母 2022-06-09 03:18 188阅读 0赞

html3D网页实例

现在的网页最求的不仅仅是数据的展示了，我们需要的是让用户产生美感，体验独特，那么酷炫的3D网页就是我们的追求，很多电脑官网或者公司官网都淘汰了那些乏味的平面网页，使用3D网页来满足用户的需求，下面我就分享一端3D网页代码，相当简单。

一、项目使用的是Hbuilder建立，代码目录结构如图所示：

![20170826114446330][]

二、3d.html，需要关注div的css设计

<html>   <head>       <title>3Dhtml</title>       <style>           body {               margin: 0;           }           .div15 {               width: 100%;               height: 900px;               background-image: url(../images/design_bg.jpg);               background-repeat: no-repeat;               position: relative;               background-attachment: fixed;               border-color: blue;               overflow: hidden;           }             .div16 {               width: 100%;               height: 1000px;               background-image: url( ../images/about_img.png);               background-position: 60% 150px;               background-repeat: no-repeat;               background-attachment: fixed;               position: absolute;               z-index: 2;           }             .div18 {               width: 100%;               height: 1000px;               background-image: url( ../images/design_sprite_frei.png);               position: relative;               background-position: 60% 300px;               background-repeat: no-repeat;               z-index: 3;           }         .div17 {               width: 100%;               height: 1000px;               background-image: url( ../images/design_frei.png);               position: absolute;               background-position: 60% 300px;               background-repeat: no-repeat;               z-index: 4;           }                 </style>   </head>   <body>       <br/><br/><br/><br/><br/><br/>       <br/><br/><br/><br/><br/><br/>              <div class="div15">           <div class="div16"></div>           <div class="div17">               <br /><br /><br /><br /><br />               <br /><br /><br /><br /><br />               <span style="color:#f7eeee; margin-left:50px;font-family:仿宋;font-size:40px;">                        whenever everything is intersting             </span>           </div>           <div class="div18"></div>     </div>       <br/><br/><br/><br/><br/><br/>       <br/><br/><br/><br/><br/><br/>   </body>   </html>

三、效果

（1）不滚动

![20170826114459085][]

（2）向上滚动

![20170826114508187][]

（3）向下滚动

![20170826114516900][]

需要图片测试的可以私信我哟

[20170826114446330]: /images/20220609/bd246f6797964e689163359d9b2c1ccc.png
[20170826114459085]: /images/20220609/3b8ba8dcfcea4b98bd831a35e44fe074.png
[20170826114508187]: /images/20220609/0573cbb6a8054ed99e2ce91b51bf1230.png
[20170826114516900]: /images/20220609/1bb35b64746743e8b496b7da4d92e7c0.png