HTML5爱心动画源码资源-CSDN文库

共3个文件

js：2个

html：1个

需积分: 1 112 浏览量 2022-12-18 10:05:35 上传评论 1 收藏 5KB ZIP 举报

HTML5是一种先进的网页标记语言，它是HTML的最新版本，提供了许多新的特性和功能，使得创建交互式、动态和富媒体的网页变得更加容易。在"HTML5爱心动画源码"这个项目中，我们可以深入探讨HTML5如何实现动态效果，特别是与爱心相关的动画。爱心动画的实现通常涉及到SVG（Scalable Vector Graphics）元素，这是一种基于XML的矢量图形格式，支持直接在HTML5文档中嵌入。SVG允许开发者创建复杂的图形，并且这些图形可以在任何分辨率下保持清晰，因为它们是基于数学路径而非像素。在这个案例中，爱心可能由多个SVG路径元素组成，通过CSS3或JavaScript进行动画处理。 CSS3是CSS的第三个主要版本，它引入了诸如动画（Animations）、过渡（Transitions）和变换（Transforms）等新特性，这些在创建动态效果时极为有用。爱心动画中的鼠标移动轨迹可能是通过CSS3的`:hover`伪类实现的，当鼠标悬停在爱心上时，会触发一个爱心轨迹的显示。而双击展示另一颗爱心的效果，可能通过监听`dblclick`事件并结合CSS3动画来完成。 JavaScript是实现更复杂交互的关键。在HTML5中，可以使用`addEventListener`方法添加事件监听器，如鼠标的移动和双击事件。当鼠标双击时，JavaScript可以通过改变SVG元素的属性或者创建新的元素来显示另一颗爱心。同时，JavaScript也可以配合CSS3关键帧动画（Keyframe Animations）来控制动画的时间线，使得动画更加平滑和流畅。在压缩包文件列表中提到的"heart"可能是SVG文件名，包含了爱心的形状定义。开发者可能使用了像Inkscape或Adobe Illustrator这样的矢量图形编辑工具来设计和导出SVG图形，然后在HTML文件中引用这个图形。 "HTML5爱心动画源码"展示了HTML5、CSS3和JavaScript的协同工作，以创建一个互动的爱心动画效果。通过理解和学习这个项目，开发者可以深化对现代Web技术的理解，提升自己在网页交互设计和动画制作方面的技能。

资源推荐

资源详情

资源评论

收起资源包目录

heart.zip （3个子文件）

heart

mouse_slide.js 3KB

clicklove.js 2KB

index.html 9KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/fromann/CDN@main/img/logo.ico"> <title>❤️</title> <script src="./mouse_slide.js"></script> <script src="./clicklove.js"></script> <style type="text/css"> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } .namebox{ color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .namebox h1{ margin: 0 auto; } </style> </head> <body> <canvas id="pinkboard"></canvas> <script> 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 }, }; ( 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)}}}()); 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; })(); var Particle = (function() { function Particle() { this.position = new Point(); this.velocity = new Point(); this.acceleration = new Point(); this.age = 0; } Particle.prototype.initialize = function(x, y, dx, dy) { this.position.x = x; this.position.y = y; this.velocity.x = dx; this.velocity.y = dy; this.acceleration.x = dx * settings.particles.effect; this.acceleration.y = dy * settings.particles.effect; 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].update(deltaTime); } if (firstFree < firstActive) { for (i = firstActive; i < particles.length; i++) particles[i].update(deltaTime); for (i = 0; i < firstFree; i++) particles[i].update(deltaTime); } // remove inactive particles while (particles[firstActive].age >= 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 <= t <= PI function pointOnHeart(t) { return new Point( 160 * Math.pow(Math.sin(t), 3), 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25 ); } // creating the particle image using a dummy canvas var image = (function() { var canvas = document.createElement('canvas'), context = canvas.getContext('2d'); canvas.width = settings.particles.size; canvas.height = settings.particles.size; // helper function to create the path function to(t) { var point = pointOnHeart(t); point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350; point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350; return point; } // create the path context.beginPath(); var t = -Math.PI; var point = to(t); context.moveTo(point.x, point.y); while (t < Math.PI) { t += 0.01; // baby steps! point = to(t); context.lineTo(point.x, point.y); } context.closePath(); // create the fill context.fillStyle = '#ff30c5'; // context.fillStyle = '#ea80b0'; context.fill(); // create the image var image = new Image(); image.src = canvas.toDataURL(); return image; })(); // render that thing! function render() { // next animation frame requestAnimationFr

评论收藏

内容反馈