HTML爱心网页制作(带文字)

您所在的位置:网站首页 c语言中爱心怎么设计 HTML爱心网页制作(带文字)

HTML爱心网页制作(带文字)

2024-07-05 18:51| 来源: 网络整理| 查看: 265

83ca088649254e119ae0fcc30ef82f94.png

XXX可随意更改,先点赞后拿文,谢谢大家啦

        love++

            html,         body {

            width: 500px;             height: 300px;             left: 50px;             top: 30px;             margin: 100px 289px;

            background: black;         }

        pp1 {             position: absolute;             top: 20px;             left: 20px;         }

        canvas {             position: absolute;             width: 1000px;             height: 500px;             left: 50%;             top: 20%;             transform: translate(-50%, 0);         }

        #contentToWrite {             font-size: 30px;             position: absolute;             left: 50%;             top: 40%;             transform: translate(-48%, 0);             /* margin-left: -80px; */

        }            

   

        // 18秒以后再跳转         setTimeout("javascript:location.href='./index.html'", 100000);    

XXX 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 < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());

        /*          * Point class          */         var Point = (function () {             function Point(x, y) {                 this.x = (typeof x !== 'undefined') ? x : 0;                 this.y = (typeof y !== 'undefined') ? y : 0;             }             Point.prototype.clone = function () {                 return new Point(this.x, this.y);             };             Point.prototype.length = function (length) {                 if (typeof length == 'undefined')                     return Math.sqrt(this.x * this.x + this.y * this.y);                 this.normalize();                 this.x *= length;                 this.y *= length;                 return this;             };             Point.prototype.normalize = function () {                 var length = this.length();                 this.x /= length;                 this.y /= length;                 return this;             };             return Point;         })();

        /*          * Particle class          */         var Particle = (function () {             function Particle() {                 this.position = new Point();                 this.velocity = new Point();                 this.acceleration = new Point();                 this.age = 0;         

 };             Particle.prototype.update = function (deltaTime) {                 this.position.x += this.velocity.x * deltaTime;                 this.position.y += this.velocity.y * deltaTime;                 this.velocity.x += this.acceleration.x * deltaTime;                 this.velocity.y += this.acceleration.y * deltaTime;                 this.age += deltaTime;             };             Particle.prototype.draw = function (context, image) {                 function ease(t) {                     return (--t) * t * t + 1;                 }                 var size = image.width * ease(this.age / settings.particles.duration);                 context.globalAlpha = 1 - this.age / settings.particles.duration;                 context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);             };             return Particle;         })();

        /*          * ParticlePool class          */         var ParticlePool = (function () {             var particles,                 firstActive = 0,                 firstFree = 0,                 duration = settings.particles.duration;

            function ParticlePool(length) {                 // create and populate particle pool                 particles = new Array(length);                 for (var i = 0; i < particles.length; i++)                     particles[i] = new Particle();             }             ParticlePool.prototype.add = function (x, y, dx, dy) {                 particles[firstFree].initialize(x, y, dx, dy);

                // handle circular queue                 firstFree++;                 if (firstFree == particles.length) firstFree = 0;                 if (firstActive == firstFree) firstActive++;                 if (firstActive == particles.length) firstActive = 0;             };             ParticlePool.prototype.update = function (deltaTime) {                 var i;

                // update 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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3