目录
效果虚拟机说明

效果

虚拟机
demo.html

放这个

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
script.js
// Customize these…
var n = 300,
speed = 5,//速度定义
startSize = rand(100,300);//大小定义

// …not these
var c = document.getElementById(“c”),
ctx = c.getContext(“2d”),
cw = (c.width = window.innerWidth),
ch = (c.height = window.innerHeight),
mousePos = {x:””, y:””},
img = new Image(),
particles = [],
particleNumber = 0,
Particle = function(index) {
this.index = index;
this.dur = (100-rand(9, 90))/speed;
this.draw = function() {
ctx.translate( this.x, this.y );
ctx.globalAlpha = this.alpha;
ctx.globalCompositeOperation = ‘lighter’;
// if (index%1.5==0) ctx.globalCompositeOperation = ‘overlay’;
if (index%2==0) ctx.globalCompositeOperation = ‘xor’;
ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size);
ctx.translate( -this.x, -this.y );
}
};

function setParticle(p, firstRun) {
var _x = cw*rand(0,1), _y = ch*rand(0,1), _s = startSize;
if (rand(0,1)>0.3 && mousePos.x!=””){ //console.log(mousePos)
_x = mousePos.x;
_y = mousePos.y;
_s = _s/10;
}
var _tl = new TimelineMax()
.fromTo(p, p.dur, {
x:_x,
y:_y,
size:_s,
alpha:0
},{
size:’+=’+String(rand(200,400)),
bezier:[{alpha:rand(0.15,0.65)},{alpha:0}],
ease:Power1.easeOut,//ease:Power0.easeNone,
onComplete:function(){ setParticle(p); }
});

if (firstRun) _tl.seek(p.dur*rand()); //fast-forward on first run
}

TweenMax.ticker.addEventListener(“tick”, function(){
ctx.clearRect(0, 0, cw, ch);
for (var i=0; iul>.idv7{
transform: translateZ(-300px) rotateY(180deg) rotate(180deg);
}
.box-biger:hover>ul>.idv12{
transform: translateZ(300px);
}

.btn {
height: 60px;
text-align: center;
line-height: 60px;
width: 90px;
margin-left: 20px;
float: left;
box-sizing: border-box;
position: absolute;
border-radius: 30px;
z-index: 30;
}
.btn img{
height: 100%;
width: 100%;
}
.btn:hover {
cursor: pointer;
}
.inpbtn {
height: 40px;
float: right;
line-height: 40px;
margin-left: 200px;
background-color: pink;
color: white;
border-radius: 30px;
}

input {
height: 40px;
width: 180px;
float: left;
border-radius: 20px;
font-size: 15px;
}

audio {
height: 40px;
width: 350px;
margin-left: -40px;
margin-top: -1px;
}

.audiobox {
height: 40px;
width: 300px;
border-radius: 20px;
overflow: hidden;
}
.btnonlond:hover>.hiddenbox{
visibility: inherit;
}
.hiddenbox {
margin-top: -60px;
margin-left: 100px;
height: 80px;
width: 300px;
transition: all 2s;
visibility: hidden;
position: absolute;
z-index: 30;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
说明

由于这个账号注册需要的JS、CSS等虚拟机较多，同时也需要图片素材，因此我已经把整个账号注册文件上传到“资源”中了！欢迎各位下载！！！