html3D网页实例

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

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

二、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/>
<!--3D效果-->
<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）不滚动

（2）向上滚动

（3）向下滚动

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

html3D网页实例相关推荐

java调用浏览器_Java调用浏览器打开网页实例完整版
Java调用浏览器打开网页实例完整版引导语:如何用Java调用浏览器打开网页呢?以下是百分网小编分享给大家的`Java调用浏览器打开网页实例完整版,欢迎阅读! package com.yifang. ...
HTML+CSS+JavaScript 静态网页实例
HTML+CSS+JavaScript 静态网页实例静态网页链接网页源码地址
Dreamweaver 8 建立网页实例
Dreamweaver 8 新功能图文实例讲解,建立网页实例 [摘要]和Macromedia Studio 8套件中其它软件一样,Dreamweaver 8也增加了许多让我们欣喜不已的新功能,比如更 ...
Python爬取动态网页实例讲解
笔者在做爬虫作业时,遇到了一个动态网页,分析代码网页源代码时因此就少了许多需要的元素.下面用一个实例来记录一下爬取动态网页的步骤. 实例:股票定向爬虫这个实例目标是从东方财富网获取股票列表,然后根据 ...
Linux 抓取网页实例（shell+awk）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 上一篇博 ...
scrapy基础之静态网页实例
1,scrapy爬虫基本流程: 1. 创建一个新的Scrapy Project > scrapy startproject 项目名称 #系统会在当前目录下创建一个项目名称命名的文件夹,其下 ...
php做网页的表格,dreamweaver做网页实例教程利用表格美化页面
在浏览网页的时候可以发现,很多用于网站排版的表格都是经过美化处理的,这些表格不仅起了布局排版的作用,而且在很大程度上美化了网页,使网页看起来更加漂亮.新颖. 效果说明利用表格美化页面的方式有很多种. ...
Python爬虫爬取静态网页实例一：爬取内涵段子吧上的段子
最近在学爬虫,这里用实例来与大家分享一下我学习的经验. 这里讲一个爬取静态网页内容的实例,Python一般利用正则表达式爬取静态静态网页的内容,而且因为静态网页源代码固定,不会发生变化,所以比较简单, ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...

html3D网页实例

html3D网页实例相关推荐

最新文章

热门文章