devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

创意特效分享：用代码绘制网页上的爱心_web心形代码

作者：Monodyee | 2024-02-16 11:28:11

赞

踩

web心形代码

在网页设计中，为了增加用户体验和吸引用户的注意力，常常需要添加一些特效来增添页面的互动性和趣味性。其中，爱心特效是一种常见且受欢迎的效果，能够在用户与网页进行交互时展现出迷人的动态效果。

通过使用HTML、CSS和JavaScript，我们可以编写简单而优雅的代码，将一个或多个爱心图案绘制到网页上。

目录

绘制多个爱心图案并赋予动画效果

跳动的爱心

绘制多个爱心图案并赋予动画效果

特效预览

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5 Canvas爱心动画特效</title>
  6.  
  7. <style>
  8. html, body {
  9.   height: 100%;
  10.   padding: 0;
  11.   margin: 0;
  12.   background: #000;
  13. }
  14. canvas {
  15.   width: 100%;
  16.   height: 100%;
  17. }
  18. </style>
  19.  
  20. </head>
  21. <body>
  22.  
  23. <div style="text-align:center;clear:both;">
  24. <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
  25. <script src="/follow.js" type="text/javascript"></script>
  26. </div>
  27.  
  28. <canvas id="pinkboard"></canvas>
  29.  
  30. <script>
  31. /*
  32.  * Settings
  33.  */
  34. var settings = {
  35.   particles: {
  36.     length:   500, // maximum amount of particles
  37.     duration:   2, // particle duration in sec
  38.     velocity: 100, // particle velocity in pixels/sec
  39.     effect: -0.75, // play with this for a nice effect
  40.     size:      30, // particle size in pixels
  41.   },
  42. };
  43.  
  44. /*
  45.  * RequestAnimationFrame polyfill by Erik M?ller
  46.  */
  47. (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)}}}());
  48.  
  49. /*
  50.  * Point class
  51.  */
  52. var Point = (function() {
  53.   function Point(x, y) {
  54.     this.x = (typeof x !== 'undefined') ? x : 0;
  55.     this.y = (typeof y !== 'undefined') ? y : 0;
  56.   }
  57.   Point.prototype.clone = function() {
  58.     return new Point(this.x, this.y);
  59.   };
  60.   Point.prototype.length = function(length) {
  61.     if (typeof length == 'undefined')
  62.       return Math.sqrt(this.x * this.x + this.y * this.y);
  63.     this.normalize();
  64.     this.x *= length;
  65.     this.y *= length;
  66.     return this;
  67.   };
  68.   Point.prototype.normalize = function() {
  69.     var length = this.length();
  70.     this.x /= length;
  71.     this.y /= length;
  72.     return this;
  73.   };
  74.   return Point;
  75. })();
  76.  
  77. /*
  78.  * Particle class
  79.  */
  80. var Particle = (function() {
  81.   function Particle() {
  82.     this.position = new Point();
  83.     this.velocity = new Point();
  84.     this.acceleration = new Point();
  85.     this.age = 0;
  86.   }
  87.   Particle.prototype.initialize = function(x, y, dx, dy) {
  88.     this.position.x = x;
  89.     this.position.y = y;
  90.     this.velocity.x = dx;
  91.     this.velocity.y = dy;
  92.     this.acceleration.x = dx * settings.particles.effect;
  93.     this.acceleration.y = dy * settings.particles.effect;
  94.     this.age = 0;
  95.   };
  96.   Particle.prototype.update = function(deltaTime) {
  97.     this.position.x += this.velocity.x * deltaTime;
  98.     this.position.y += this.velocity.y * deltaTime;
  99.     this.velocity.x += this.acceleration.x * deltaTime;
  100.     this.velocity.y += this.acceleration.y * deltaTime;
  101.     this.age += deltaTime;
  102.   };
  103.   Particle.prototype.draw = function(context, image) {
  104.     function ease(t) {
  105.       return (--t) * t * t + 1;
  106.     }
  107.     var size = image.width * ease(this.age / settings.particles.duration);
  108.     context.globalAlpha = 1 - this.age / settings.particles.duration;
  109.     context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
  110.   };
  111.   return Particle;
  112. })();
  113.  
  114. /*
  115.  * ParticlePool class
  116.  */
  117. var ParticlePool = (function() {
  118.   var particles,
  119.       firstActive = 0,
  120.       firstFree   = 0,
  121.       duration    = settings.particles.duration;
  122.   
  123.   function ParticlePool(length) {
  124.     // create and populate particle pool
  125.     particles = new Array(length);
  126.     for (var i = 0; i < particles.length; i++)
  127.       particles[i] = new Particle();
  128.   }
  129.   ParticlePool.prototype.add = function(x, y, dx, dy) {
  130.     particles[firstFree].initialize(x, y, dx, dy);
  131.     
  132.     // handle circular queue
  133.     firstFree++;
  134.     if (firstFree   == particles.length) firstFree   = 0;
  135.     if (firstActive == firstFree       ) firstActive++;
  136.     if (firstActive == particles.length) firstActive = 0;
  137.   };
  138.   ParticlePool.prototype.update = function(deltaTime) {
  139.     var i;
  140.     
  141.     // update active particles
  142.     if (firstActive < firstFree) {
  143.       for (i = firstActive; i < firstFree; i++)
  144.         particles[i].update(deltaTime);
  145.     }
  146.     if (firstFree < firstActive) {
  147.       for (i = firstActive; i < particles.length; i++)
  148.         particles[i].update(deltaTime);
  149.       for (i = 0; i < firstFree; i++)
  150.         particles[i].update(deltaTime);
  151.     }
  152.     
  153.     // remove inactive particles
  154.     while (particles[firstActive].age >= duration && firstActive != firstFree) {
  155.       firstActive++;
  156.       if (firstActive == particles.length) firstActive = 0;
  157.     }
  158.     
  159.     
  160.   };
  161.   ParticlePool.prototype.draw = function(context, image) {
  162.     // draw active particles
  163.     if (firstActive < firstFree) {
  164.       for (i = firstActive; i < firstFree; i++)
  165.         particles[i].draw(context, image);
  166.     }
  167.     if (firstFree < firstActive) {
  168.       for (i = firstActive; i < particles.length; i++)
  169.         particles[i].draw(context, image);
  170.       for (i = 0; i < firstFree; i++)
  171.         particles[i].draw(context, image);
  172.     }
  173.   };
  174.   return ParticlePool;
  175. })();
  176.  
  177. /*
  178.  * Putting it all together
  179.  */
  180. (function(canvas) {
  181.   var context = canvas.getContext('2d'),
  182.       particles = new ParticlePool(settings.particles.length),
  183.       particleRate = settings.particles.length / settings.particles.duration, // particles/sec
  184.       time;
  185.   
  186.   // get point on heart with -PI <= t <= PI
  187.   function pointOnHeart(t) {
  188.     return new Point(
  189.       160 * Math.pow(Math.sin(t), 3),
  190.       130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
  191.     );
  192.   }
  193.   
  194.   // creating the particle image using a dummy canvas
  195.   var image = (function() {
  196.     var canvas  = document.createElement('canvas'),
  197.         context = canvas.getContext('2d');
  198.     canvas.width  = settings.particles.size;
  199.     canvas.height = settings.particles.size;
  200.     // helper function to create the path
  201.     function to(t) {
  202.       var point = pointOnHeart(t);
  203.       point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
  204.       point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
  205.       return point;
  206.     }
  207.     // create the path
  208.     context.beginPath();
  209.     var t = -Math.PI;
  210.     var point = to(t);
  211.     context.moveTo(point.x, point.y);
  212.     while (t < Math.PI) {
  213.       t += 0.01; // baby steps!
  214.       point = to(t);
  215.       context.lineTo(point.x, point.y);
  216.     }
  217.     context.closePath();
  218.     // create the fill
  219.     context.fillStyle = '#ea80b0';
  220.     context.fill();
  221.     // create the image
  222.     var image = new Image();
  223.     image.src = canvas.toDataURL();
  224.     return image;
  225.   })();
  226.   
  227.   // render that thing!
  228.   function render() {
  229.     // next animation frame
  230.     requestAnimationFrame(render);
  231.     
  232.     // update time
  233.     var newTime   = new Date().getTime() / 1000,
  234.         deltaTime = newTime - (time || newTime);
  235.     time = newTime;
  236.     
  237.     // clear canvas
  238.     context.clearRect(0, 0, canvas.width, canvas.height);
  239.     
  240.     // create new particles
  241.     var amount = particleRate * deltaTime;
  242.     for (var i = 0; i < amount; i++) {
  243.       var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
  244.       var dir = pos.clone().length(settings.particles.velocity);
  245.       particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
  246.     }
  247.     
  248.     // update and draw particles
  249.     particles.update(deltaTime);
  250.     particles.draw(context, image);
  251.   }
  252.   
  253.   // handle (re-)sizing of the canvas
  254.   function onResize() {
  255.     canvas.width  = canvas.clientWidth;
  256.     canvas.height = canvas.clientHeight;
  257.   }
  258.   window.onresize = onResize;
  259.   
  260.   // delay rendering bootstrap
  261.   setTimeout(function() {
  262.     onResize();
  263.     render();
  264.   }, 10);
  265. })(document.getElementById('pinkboard'));
  266. </script>
  267.  
  268. </body>
  269. </html>

跳动的爱心

效果预览

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5 Css爱心动画特效</title>    
  6. </head>
  7.  
  8. <body>
  9.     <div class="heart">
  10.         <div class="left"></div>
  11.         <div class="right"></div>
  12.     </div>
  13. </body>
  14. <style>
  15. 	        body {
  16. 	            margin: 0;
  17. 	            background-color: black;
  18. 	        }
  19. 	        
  20. 	        .heart {
  21. 	            width: 200px;
  22. 	            height: 200px;
  23. 	            /*auto 左右自动相等 */
  24. 	            margin: 100px auto;
  25. 	            background-color: black;
  26. 	            /* 播放动画 动画名称 时间 匀速 无限播放 反向 */
  27. 	            animation: beat 1s linear infinite alternate;
  28. 	        }
  29. 	        /* 关键帧 */
  30. 	        
  31. 	        @keyframes beat {
  32. 	            /* 开始画面 */
  33. 	            0% {
  34. 	                transform: scale(1);
  35. 	            }
  36. 	            /* 结束画面 */
  37. 	            100% {
  38. 	                transform: scale(1.1);
  39. 	            }
  40. 	        }
  41. 	        
  42. 	        .left,
  43. 	        .right {
  44. 	            width: 100px;
  45. 	            height: 160px;
  46. 	            float: left;
  47. 	            background-color: pink;
  48. 	            /* 圆角 顺时针 左上 右上 右下 左下  半径 */
  49. 	            border-radius: 50px 50px 0 0;
  50. 	            /* 盒子阴影 水平方向 垂直方向 模糊半径 扩展  颜色 */
  51. 	            box-shadow: 0px 0px 20px 0px pink;
  52. 	        }
  53. 	        
  54. 	        .left {
  55. 	            /* 变换 移动 旋转 */
  56. 	            transform: translateX(29px) rotate(-45deg);
  57. 	        }
  58. 	        
  59. 	        .right {
  60. 	            transform: translateX(-29px) rotate(45deg);
  61. 	        }
  62.  
  63. </style>
  64. </html>
  65.
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/92719
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号