<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>基于HTML5 WebGL的3D星云动画特效 - 代码库</title>
<meta charset="utf-8">
<meta name="description" content="WebGL galaxy with shaders" />
<style>
body{
margin:0;
background-color:#000;
}
canvas{
cursor:grab;
cursor:-webkit-grab;
cursor:-moz-grab;
}
canvas:active{
cursor:grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
}
a.twitter, a.more{
position:absolute;
bottom:40px;
right:10px;
font-family:Arial;
color:#33c;
margin-right:-500px;
transition:margin-right 500ms ease;
}
p{
margin:3px;
position:relative;
font:normal 15px Arial;
}
p.shadow{
text-shadow:1px 1px 2px #000 ;
}
div.layout{
top:-250px;
width:100%;
position:absolute;
transition:top 500ms ease;
}
#instruction{
z-index:1;
color:#f90;
font-family:Arial;
padding:9px 0 5px 0;
background-color:darkslategrey;
top:100%;
width:50%;
position:absolute;
left:25%;
opacity:.8;
border-radius:0px 0px 100px 100px;
text-align:center;
transition:all 500ms ease;
}
#good-person{
cursor:pointer;
color:#f90;
font-family:Arial;
padding:9px 0 5px 0;
background-color:darkslategrey;
bottom:-50px;
box-shadow:0px -2px 4px black inset;
width:50%;
position:absolute;
left:25%;
opacity:.8;
border-radius:100px 100px 0px 0px ;
text-align:center;
transition:all 500ms ease;
}
#info{
border:solid 4px #444;
border-top:none;
border-radius:0px 0px 10px 10px;
z-index:2;
box-shadow:0px 5px 5px black ;
color:#aaa;
font-family:Arial;
position:relative;
text-align:center;
padding:1px;
top:0px;
width:50%;
min-width:500px;
margin:auto;
background:linear-gradient(-78deg ,#222 23%, #446 39%, #222 45%,#222 52%, #334 55%, #222 57%);
}
span.black{
width:3%;
height:7%;
background:black;
position:absolute;
left:-1%;
box-shadow:-2px 0px 5px #222 inset;
}
span.right{
position:absolute;
left:98%;
box-shadow:2px 0px 5px #222 inset;
}
span.one{top:10%}
span.two{top:19%}
span.three{top:28%}
span.four{top:37%}
p.positionning{
width:50%;
background:#000;
height:2px;
text-align:left;
margin:10px auto;
}
#timeline{
height:2px;
width:0%;
position:absolute;
top:0%;
}
.scanning{
background:#f90;
/*animation:scan 8s linear;*/ /* way faster on mobile without that*/
}
@keyframes scan{
0%{
width:0%;
box-shadow:0px 0px 20px 5px #f90;
}
100%{
width:100%;
box-shadow:0px 0px 20px 5px #f90;
}
}
.waiting{
background:#3c4;
/*animation:wait 4s infinite;*/ /*same*/
}
@keyframes wait{
0%{
width:100%;
box-shadow:0px 0px 20px 3px #3c4;
}
50%{
width:100%;
box-shadow:0px 0px 0px 0px #3c4;
}
100%{
width:100%;
box-shadow:0px 0px 20px 3px #3c4;
}
}
.warning{
background:#f50;
animation:warn 1s infinite;
}
@keyframes warn{
0%{
width:100%;
box-shadow:0px 0px 0px 0px #f50;
}
50%{
width:100%;
box-shadow:0px 0px 20px 3px #f50;
}
100%{
width:100%;
box-shadow:0px 0px 0px 0px #f50;
}
}
span.eye{
width:40px;
height:40px;
background:-webkit-radial-gradient(orange 0% , red 20%, black 60%, #555 61%);
background:-moz-radial-gradient(orange 0% , red 20%, black 60%, #555 61%);
background:-ms-radial-gradient(orange 0% , red 20%, black 60%, #555 61%);
background:-o-radial-gradient(orange 0% , red 20%, black 60%, #555 61%);
border-radius:50%;
position:absolute;
left:47px;
top:7px;
}
span.metal{
font:bold 10px Arial;
width:40px;
height:40px;
background:-webkit-radial-gradient(#777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
background:-moz-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
background:-ms-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
background:-o-radial-gradient(#666 0% , #777 15%,#888 35%, #666 50%,#888 55%,#555 65%);
border-radius:50%;
box-shadow:0px 0px 15px 3px black;
position:absolute;
right:47px;
top:7px;
color:#222;
}
.clic{
animation:clic .2s linear 2 alternate;
}
@keyframes clic{
0%{box-shadow:0px 0px 15px 3px black}
100%{box-shadow:0px 0px 15px 3px green}
}
span.metal:after{
position:relative;
content:'ABORT';
text-align:center;
width:100%;
top:14px
}
.abort{
animation:aborting .4s linear infinite alternate;
}
@keyframes aborting{
0%{color:#222;}
100%{color:red;}
}
#log{
font:normal 15px Courier;
border-radius:10px;
height:36px;
padding:3px 15px;
background:black;
}
#howmuch {
top:20%;
height:71%;
width:58px;
position:absolute;
text-align:center;
border:solid 4px #444;
border-left:none;
border-radius:0px 10px 10px 0px;
background:#222;
padding:2px;
left:-100px;
transition:left 500ms ease;
}
#good{
top:15%;
color:#590;
font:bold 15px Arial;
left:1px;
}
#bad{
font:bold 15px Arial;
color:#a11;
position:absolute;
bottom:22%;
left:4px;
}
#gauge {
position:absolute;
top:50%;
left:11px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 19px solid #444;
border-right: 19px solid #444;
width:2px;
transition:top 2s ease;
}
#bg{
width:40px;
height:40%;
background:black;
position:absolute;
top:30%;
left:11px;
}
p.counter-title{
color:#aaa;
font:normal 10px Arial;
}
#destroyed{
position:absolute;
bottom:0;
left:-2px;
}
p.counter{
width:40px;
height:40px;
left:7px;
border-radius:50%;
border:solid 1px #555;
position:absolute;
font:bold 37px Arial;
color:#aaa;
background:#222;
}
#destroyedresult{
bottom:30px;
}
p.change{
animation:changing 2s linear;
}
@keyframes changing{
0%{
background:#ccc;
}
100%{
background:#222;
}
}
</style>
</head>
<body>
<script id='vShader' type='x-vertex/x-shader'>
uniform float size;
uniform float t;
uniform float z;
uniform float pixelRatio;
varying vec3 vPosition;
varying vec3 mPosition;//modified position
varying float gas;
float a,b=0.;
void main(){
vPosition=position;
a=length(position);
if(t>0.)b=max(0.,(cos(a/20.-t*.02)-.99)*3./a);
if(z>0.)b=max(0.,cos(a/40.-z*.01+2.));
mPosition=position*(1.+b*4.);
vec4 mvPosition=modelViewMatrix*vec4(mPosition,1.);
gl_Position=mvPosition*projectionMatrix;
gas=max(.0,sin(-a/20.));
gl_PointSize=pixelRatio*size*(1.+gas*2.)/length(mvPosition.xyz);
}
</script>
<script id='fShader' type='x-fragment/x-shader'>
uniform float z;
varying vec3 vPosition;
varying vec3 mPosition;
varying float gas;
void main(){
float a=distance(mPosition,vPosition);
if(a>0.)a=1.;
float b=max(.32,.0065*length(vPosition));
float c=distance(gl_PointCoord,vec2(.5));
float starlook=-(c-.5)*1.2*gas;
float gaslook=(1.-gas)/(c*10.);
float texture=starlook+gaslook;
gl_FragColor=vec4(.32,.28,b,1.)*texture*(1.-a*.35);
if(z>0.)gl_FragColor*=cos(1.57*z/322.)*(1.-.001*length(mPosition));
}
</script>
<button style='position:absolute;width:100%;text-align:center;border-radius:5px;right:10px;font-family:Arial;color:#33c;outline:none;background:none;border:none;text-decoration:underline;font-size:16px;cursor:pointer;'></button>
<!-- webglstats.com-->
<script type="text/javascript">
(function() {
var collect, loaded, wait;
collect = function() {
var battery, batteryManager, data, documentElement, getAntialias, getAttrib, getCaveatContext, getContext, getContextByName, getEndian, getExtensions, getParams, getShaderPrecisions, getWebglInfo, isPresent, orientation, paramNames, ref, ref1, ref2, request, screen, vendorName, vendors;
vendors = [null, 'webkit', 'moz', 'ms', 'o'];
vendorName = function(name, vendor) {
if ((vendor != null) && vendor.length > 0) {
return vendor + name[0].toUpperCase() + name.substr(1);
} else {
return name;
}
};
getAttrib = function(obj, name) {
资源评论
馫馫馫馫香
- 粉丝: 398
- 资源: 3
会员权益专享
资源目录
表白html.zip （26个子文件） 
表白html 气球 css 
dmaku.css 4KB images 
bg_01.jpg 2KB
yun3.png 24KB bg_06.jpg 3KB 201101ddd22135412367.png 104KB yun2.png 54KB bg_05.jpg 2KB 201101asdsaf22135412367.png 102KB bg_02.jpg 7KB 20110122135412367.png 114KB 20110122135aaaaa412367.png 99KB yun1.png 43KB bg_04.jpg 7KB 730e0cf3d7ca7bcbbc1b79c0bf096b63f724a8f9.png 14KB yun4.png 104KB bg.jpg 63KB 20110122135s412367.png 108KB
index.html 1KB 惊喜.html 86KB 心形+文字 images 
heart.svg 416B index.html 4KB 鸡.html 4KB 心形.html 549KB 星系.html 649KB 烟花表白.html 6KB 玫瑰花加烟花.html 93KB
