html炫酷的地球特效代码(js炫酷地球)
html5地球如何实现转动
!doctype html
html
head
meta charset="utf-8"
title旋转/title
style
* {margin:0; padding:0; border:0;}
div {width:200px; height:200px; margin-left:100px; margin-top:-100px;}
img {width:200px; height:200px; border-radius:100px; animation:myfirst 5s linear infinite; -webkit-animation:myfirst 5s linear infinite; animation-play-state:running; -webkit-animation-play-state:running;}
img:hover {animation-play-state:paused; -webkit-animation-play-state:paused;}
@keyframes myfirst {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
@-webkit-keyframes myfirst {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
/style
/head
body
p style="margin-top:100px"/p
divimg src="163146_vN8g_574908.jpg"/div
/body
/html
需要的图片
4行代码就可以完成一个Web版的3D地球可视化展示——Gio.js
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
这个库的开发是受到Google 2012 Info大会上的某项目可视化的启发，该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型，并以此为基础进行深入地开发。
在HTML的head中引入Three.js和Gio.js依赖， 以下展示了如何使用script标签引入依赖:
在引入Three.js和Gio.js在页面之后，已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。
创建一个p，Gio地球将会被渲染在这个区域中：
添加一下4行Javascript代码在你的HTML中， 用以创建并渲染：
在Gio.js 1.0发布之后，开发者们提出了很多很酷的、很有建设性的建议，比如微信应用开发者希望Gio.js支持微信小程序，有经验的Three.js开发者希望Gio.js提供Three.js编程接口等。在经过仔细研究、综合设计之后，Gio.js 2.0实现了大部分功能，并且添加了有关文档说明。以下列出了主要的2.0新增特性：
Gio.js仅依赖于Three.js。
经过测试，Gio.js在Three.js R90版本下可以很好地运行和使用。
Gio.js可以运行在以下的浏览器环境中:
更多详细的介绍就不在本文中介绍了，官方文档非常详细，感兴趣的小伙伴可以直接移步文档：
Gio.js可以说是Three.js中实践的非常不错的了，官方还提供了非常多的实例，通过一些简单的API配置即可实现非常炫酷的Web3D可视化地球，而且文档非常详细，更多实用和有趣的地方等待你的 探索 ！
网页特效代码
1.这个特效的代码我复制在文本改后缀打开,效果大打折扣,为什么?
你再仔细的看下代码这段
ILTER: progid:dximagetransform.microsoft.gradientwipe(duration=1); BEHAVIOR: url(images/xs.htc)
这段是CSS，其中BEHAVIOR: url(images/xs.htc)表示网页背景文件，如果你单纯的复制代码没有对应的背景文件，效果当然大打折扣了
2.还有每次打开自做的网也上面都有个安全提示,很麻烦,怎么关?
因为这段代码用了JS，本机测试机器会有提示
这是IE高版本增加的安全限制，你可以在 工具-internet 选项-安全-自定义里来更改脚本安全级别，但不建议你这样，这样改了很容易中网页木马
请高手写个网页制作的特效代码，在线等，采纳追加100分
就是这些代码，如果你不满意我倒找你100分！
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /FCK:meta
title超酷的旋转图片特效/title
/head
body
style type="text/css"
body{background:black}
.point{position:absolute;height:120px;}
/style
script
var r=200,dv=0.01,w=100,x=400;y=100,pn=8; //r半径，dv偏移量，w图片宽度，x菜单横坐标，y菜单纵坐标，pn菜单图片数量
var pi=Math.PI,d=pi/2;
var pd=Math.asin(w/2/r),ed=pi*2/pn,sm;//pd各个图片的反正弦
function goR(){
var o=document.getElementById('imground');
var arrimg=o.getElementsByTagName('img');
for (var n=0;narrimg.length;n++){
arrimg[n].onmouseout=function(){sm=setInterval('roundMove()',50);} //鼠标离开菜单后继续转动
arrimg[n].onmouseover=function(){clearInterval(sm)} //鼠标移上菜单停止转动
arrimg[n].onmousedown=function(){dv=dv*2} //鼠标单击菜单加快转到速度
}
sm=setInterval('roundMove()',50);
}
function roundMove(){
var v=document.getElementById('imground');
var arrimg=v.getElementsByTagName('img');
var o,ta,strFilter;
for (var n=1;n=pn;n++){
o=arrimg[n-1];
ta=Math.sin(d+ed*n);//获得当前偏移量的正弦值
strFilter='';
if (ta0){//正弦值对应为负弧度，即图片旋转到圆的背面
o.style.left=Math.cos(d+ed*n-pd)*r+x+'px'; //传入当前图片移动的横坐标
}
else{//当图片旋转到圆的正面时
o.style.left=Math.cos(d+ed*n+pd)*r+x+'px';//传入当前图片移动的横坐标
}
o.style.top=ta*10+5+y+'px'; //传入当前图片移动的纵坐标
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r+'px';
o.style.zIndex=parseInt(ta*10);
if (o.style.zIndex0){//当图片旋转到居后的位置时翻转图片
strFilter='FlipH(enabled:true)';
}
else{ //当图片旋转到前面的位置时显示图片正面
strFilter='FlipH(enabled:false)';
}
if (ta0){
ta=(ta+1)*80+20;
}else{
ta=100;
}
strFilter=strFilter+' alpha(opacity='+ta+')'; //透明效果（针对IE）
o.style.opacity=ta/100; //透明效果（针对非IE）
o.style.filter=strFilter; //在菜单图片上加入滤镜效果
}
d+=dv; //增加偏移值
}
/script
div id="imground"
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
img class="point" src="" _fcksavedurl="" _fcksavedurl=""/
/div
script language="javascript"goR();/script
/body
/html
跪求一个网页特效代码
1;触发式;html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title网页特效代码---经典实用的触发型导航菜单/title
/head
body
STYLE type=text/css.sec1 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:
#eeeeee
}
.sec2 {
BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
/STYLE
!--JavaScript部分--
SCRIPT language=javascript
function secBoard(n)
{
for(i=0;isecTable.cells.length;i++)
secTable.cells
[i].className="sec1";
secTable.cells[n].className="sec2";
for(i=0;imainTable.tBodies.length;i++)
mainTable.tBodies
[i].style.display="none";
mainTable.tBodies
[n].style.display="block";
}
/SCRIPT
!--HTML部分--
TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0
TBODY
TR align=middle height=20
TD class=sec2 onclick=secBoard(0) width="10%"关于TBODY标记/TD
TD class=sec1 onclick=secBoard(1) width="10%"关于cells集合/TD
TD class=sec1 onclick=secBoard(2) width="10%"关于tBodies集合/TD
TD class=sec1 onclick=secBoard(3) width="10%"关于display属性/TD/TR/TBODY/TABLE
TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0!--关于TBODY标记--
TBODY style="DISPLAY: block"
TR
TD vAlign=top align=middleBRBR
TABLE cellSpacing=0 cellPadding=0 width=490 border=0
TBODY
TR
TD指定行做为表体。
BR注释：TBODY要素是块要素，并且需要结束标
签。BR 即使如果表格没有显式定义TBODY
要素，该要素也提供给所有表。BRBR
参考：《动态HTML参考和开发应用大全》（人民邮电出
版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!--关于cells集合--
TBODY style="DISPLAY:
none"
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD检索表行或者整个
表中所有单元格的集合。BR应用于TR、TABLE。
BRBR参考：《动态HTML参考和开发应
用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!--关于tBodies集合--
TBODY style="DISPLAY:
none"
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
BR应用于TABLE。BRBR参考：
《动态HTML参考和开发应用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司
译）
BRBR/TD/TR/TB
ODY/TABLE/TD/TR/T
BODY!--关于display属性--
TBODY style="DISPLAY:
none"
TR
TD vAlign=top
align=middleBRBR
TABLE cellSpacing=0
cellPadding=0 width=490 border=0
TBODY
TR
TD设置或者检索对象
是否被提供。BR可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。BR该特性可读写，块要素默认
值为block，内联要素默认值为inline；层叠样式表
（CSS）属性不可继承。BRBR参考：《
动态HTML参考和开发应用大全》（人民邮电出版社
Microsoft Corporation著
北京华中兴业科技发展有限公司译）
BRBRA
href="" target=_blank点击此处
/A可参阅微软A href="" target=_blankMSDN在线/A上的解释。
/TD/TR/TBODY/TABLE
;/TD/TR/TBODY/TABLEg
t;/body
/html