html情侣表白代码，自动打字、动态爱心、图片旋转木马特效 |
您所在的位置：网站首页 › 疯子动画图片大全 › html情侣表白代码，自动打字、动态爱心、图片旋转木马特效 |
|
给男朋友准备的520礼物，他觉得太尴尬了，于是我特地把这个项目开源，让大家一起感受一下男票的尴尬，哈哈哈哈哈哈我好恶趣味。 话不多说上代码 html部分： love++ html, body { width: 500px; height:300px; left:50px; top:30px; margin: 100px 289px; background: #f6d8e2; } pp1{ position: absolute; top: 20px; left: 20px; } canvas { position: absolute; width: 1000px; height: 500px; left:135px; top:50px; } // 18秒以后再跳转 setTimeout("javascript:location.href='./index.html'", 15000); 此为打字动画，可以编辑文本 writeContent(true); /* * Settings */ var settings = { particles: { length: 500, // maximum amount of particles duration: 2, // particle duration in sec velocity: 100, // particle velocity in pixels/sec effect: -0.75, // play with this for a nice effect size: 30, // particle size in pixels }, }; /* * RequestAnimationFrame polyfill by Erik M?ller */ (function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a= duration && firstActive != firstFree) { firstActive++; if (firstActive == particles.length) firstActive = 0; } }; ParticlePool.prototype.draw = function(context, image) { // draw active particles if (firstActive < firstFree) { for (i = firstActive; i < firstFree; i++) particles[i].draw(context, image); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].draw(context, image); for (i = 0; i < firstFree; i++) particles[i].draw(context, image); } }; return ParticlePool; })(); /* * Putting it all together */ (function(canvas) { var context = canvas.getContext('2d'), particles = new ParticlePool(settings.particles.length), particleRate = settings.particles.length / settings.particles.duration, // particles/sec time; // get point on heart with -PI } #Ellipse{ position:relative; visibility:visible; z-index:1; width:700px; height:80px; border:none; margin-top: 250px; margin-bottom: 100px; } .RotatingIcon{ border:none; width:80px; } >> 传送门 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |