樱花爱心动态网页

已于 2023-07-11 16:15:24 修改
阅读量116 收藏
点赞数 1
文章标签： html 前端 javascript
于 2023-07-11 16:01:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55977434/article/details/131662108
版权

机缘：在csdn首页无意看见这个樱花爱心蛮有意思，但是复制源码出现报错，看见评论区也有人提出了该问题，还有在爱心中添加姓名的新需求，我就复制后将代码修改了下．

原文章：HTML爱心网页制作[樱花+爱心]

效果：粉嫩花瓣不断从中间位置向外铺开组成爱心形状，夹杂着花瓣透明度和消失出现的变化．姓名始终处于屏幕中间位置．

效果图：

：建议使用谷歌浏览器 

代码：

实现代码如下，复制粘贴运行即可出现上图效果（png和mp3没有不影响上图效果）

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="js/jquery.min.js"></script>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
      background: #000;
    }

    .aa {
      position: fixed;
      left: 50%;
      bottom: 10px;
      color: #ccc;
    }

    .container {
      width: 100%;
      height: 100%;
    }
    canvas {
      z-index: 99;
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .name {
      color: #eccdd3;
      font-size: 32px;
      font-weight: bold;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <!-- 樱花 -->
    <div id="jsi-cherry-container" class="container">
      <audio autoplay="autopaly">
        <source src="renxi.mp3" type="audio/mp3" />
      </audio>
      <img class="img" src="./123.png" alt="" />
      <!-- 爱心 -->
      <canvas id="pinkboard" class="container"> </canvas>
      <!-- 可输入名字 -->
      <p class="name">小 鱼</p>
    </div>
  </body>
</html>
<script>
  /*
   * 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
    }
  }

  ;(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) {
        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.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 (let i = firstActive; i < firstFree; i++)
          particles[i].draw(context, image)
      }
      if (firstFree < firstActive) {
        for (let i = firstActive; i < particles.length; i++)
          particles[i].draw(context, image)
        for (let 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 = '#ea80b0'
      context.fill()
      // create the image
      var image = new Image()
      image.src = canvas.toDataURL()
      return image
    })()

    // render that thing!
    function render() {
      // next animation frame
      requestAnimationFrame(render)

      // update time
      var newTime = new Date().getTime() / 1000,
        deltaTime = newTime - (time || newTime)
      time = newTime

      // clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height)

      // create new particles
      var amount = particleRate * deltaTime
      for (var i = 0; i < amount; i++) {
        var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random())
        var dir = pos.clone().length(settings.particles.velocity)
        particles.add(
          canvas.width / 2 + pos.x,
          canvas.height / 2 - pos.y,
          dir.x,
          -dir.y
        )
      }

      // update and draw particles
      particles.update(deltaTime)
      particles.draw(context, image)
    }

    // handle (re-)sizing of the canvas
    function onResize() {
      canvas.width = canvas.clientWidth
      canvas.height = canvas.clientHeight
    }
    window.onresize = onResize

    // delay rendering bootstrap
    setTimeout(function() {
      onResize()
      render()
    }, 10)
  })(document.getElementById('pinkboard'))
</script>

<script>
  var RENDERER = {
    INIT_CHERRY_BLOSSOM_COUNT: 30,
    MAX_ADDING_INTERVAL: 10,

    init: function() {
      this.setParameters()
      this.reconstructMethods()
      this.createCherries()
      this.render()
      if (
        navigator.userAgent.match(
          /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        // var box = document.querySelectorAll(".box")[0];
        // console.log(box, "移动端");
        // box.style.marginTop = "65%";
      } else {
        this.phi += Math.PI / (axis.y == this.thresholdY ? 200 : 500)
        this.phi %= Math.PI
      }
      if (this.y <= -this.renderer.height * this.SURFACE_RATE) {
        this.x += 2
        this.y = -this.renderer.height * this.SURFACE_RATE
      } else {
        this.x += this.vx
        this.y += this.vy
      }
      return (
        this.z > -this.FOCUS_POSITION &&
        this.z < this.FAR_LIMIT &&
        this.x < this.renderer.width * 1.5
      )
    },
    setParameters: function() {
      this.$container = $('#jsi-cherry-container')
      this.width = this.$container.width()
      this.height = this.$container.height()
      this.context = $('<canvas />')
        .attr({ width: this.width, height: this.height })
        .appendTo(this.$container)
        .get(0)
      var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),
        x = this.renderer.width / 2 + this.x * rate,
        y = this.renderer.height / 2 - this.y * rate
      return { rate: rate, x: x, y: y }
    }
  }
  $(function() {
    RENDERER.init()
  })
</script>

ps：非我原创，已贴出原文章链接，无意侵权

钱多多810
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
樱花飘落代码.zip
01-22
一款写好的樱花飘落模板源码，上传到根目录就可使用，非常漂亮！完美无错
樱花落-动图.rar
03-23
本资源旨在与大家共享，里面包括动态樱花分享，无套路送 为什么要把樱花拿出来送呢： 花语：樱花是爱情与希望的象征，日本的代表物之一。在日本，相传在很久以前，日本有位名叫“木花开耶姬”（意为樱花）的仙女。...
HTML爱心网页制作[樱花+爱心]
热门推荐
Su_mer的博客
10-03 15万+
HTML爱心网页制作[樱花+爱心]
谁说程序员不懂浪漫？ 动态樱花爱心来咯～ 【附源代码】
Lov1_BYS的博客
11-08 1129
超火的动态爱心网页绘制
HTML/樱花爱心网页/
Shane_xiao的博客
11-08 1575
爱心代码
HTML爱心网页制作[樱花+爱心+炫彩文字]
white_218的博客
11-09 1682
HTML爱心网页制作[樱花+爱心+炫彩文字]
李峋爱心代码 程序员教你用代码制作爱心网页[樱花+爱心]，正好拿去送给女神给她个惊喜
无边热爱，来日方长
11-08 4421
李峋爱心代码 程序员教你用代码制作爱心网页[樱花+爱心]，正好拿去送给女神给她个惊喜
HTML爱心网页制作[樱花+爱心]_html写一个心形网页
2401_85013565的博客
05-15 765
收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。 如果你需要这些资料，可以戳这里获取需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！}.aa { position: fixed; left: 50%; bottom: 10px; c
HTML爱心网页制作[樱花+爱心]_html写一个心形网页(1)
2401_85013565的博客
05-15 983
(img-2qtcmBwK-1715787074521)](img-SvM9527p-1715787074521)]帮助到想自学提升的朋友。
七夕表白代码,樱花特效+爱心特效+花瓣+评论留言功能等
ju__ju的博客
08-05 1万+
___今天是8月5日,离8月25日七夕还有20天,最近项目不太多,闲暇时间找了一套JQuery代码 ------- 超级好看的花瓣表白网页源码, ___然后通过gitee(码云)搭建了一套个人网页,因为使用了valine公共评论平台,怕一些人发布不良言论,所以项目地址还不能公开. 1.这套代码效果挺不错的,缺点就是bug太多,应该是作者阉割过很多的,有一些cavans绘制的特效都阉掉了,修复起来难度比较大.就把相关js注释了. 2.之前使用的评论模块应该是多说(duoshuo)第三方公开评论平台,但是这个.
2024年最全HTML爱心网页制作[樱花+爱心]_html写一个心形网页，2024年最新最新BAT大厂面试者整理的物联网嵌入式开发面试题目
2401_85014194的博客
05-14 730
)();/**/image,size,size})();/**/i++)var i;i++)i++)for (i = 0;while () {i++)i++)for (i = 0;
C++实现樱花飘落效果
10-08
1、本文详细描述了C++语言实现樱花飘落效果的方法。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及理解。
桌面动态樱花
07-15
一个会飘落的动态樱花~！打开后会在桌面上面出现开满花的樱花树枝，会自动飘落~！有时还会有风吹过~！本软件不是我开发的~！是我曾经收藏的，今天与大家分享一下~！很好玩值得下载~！
网页动画素材 樱花l love you（抖音资料）
07-14
网页动画素材 樱花l love you（抖音资料）网页动画素材 樱花l love you（抖音资料）网页动画素材 樱花l love you（抖音资料）网页动画素材 樱花l love you（抖音资料）网页动画素材 樱花l love you（抖音资料）网页...
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 142
HTML,CSS,JavaScript,DOM的理解
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 330
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
HTML常见标签-换行标签-水平线标签
weixin_44201223的博客
05-14 186
换行标签 水平线标签
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 745
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
js樱花爱心动画代码
04-03
当然，我可以为您介绍一下JavaScript实现樱花爱心动画的代码。以下是一个简单的示例： ```javascript // 创建一个canvas元素 const canvas = document.createElement('canvas'); document.body.appendChild(canvas); // 设置canvas的宽度和高度 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 获取绘图上下文 const ctx = canvas.getContext('2d'); // 定义樱花的属性 const petals = []; const numPetals = 100; // 樱花的数量 // 创建樱花对象 class Petal { constructor() { this.x = Math.random() * canvas.width; // 樱花的初始x坐标 this.y = Math.random() * canvas.height; // 樱花的初始y坐标 this.radius = Math.random() * 5 + 2; // 樱花的半径 this.speedX = Math.random() * 1 - 0.5; // 樱花在x轴上的速度 this.speedY = Math.random() * 1 + 1; // 樱花在y轴上的速度 } // 绘制樱花 draw() { ctx.fillStyle = 'pink'; ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } // 更新樱花的位置 update() { this.x += this.speedX; this.y += this.speedY; // 当樱花超出屏幕时，重新设置其位置 if (this.y > canvas.height) { this.y = Math.random() * -100; this.speedY = Math.random() * 1 + 1; } this.draw(); } } // 创建樱花对象并添加到petals数组中 for (let i = 0; i < numPetals; i++) { petals.push(new Petal()); } // 动画循环 function animate() { requestAnimationFrame(animate); ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新并绘制每个樱花 for (let i = 0; i < numPetals; i++) { petals[i].update(); } } // 启动动画 animate(); ``` 这段代码使用HTML5的Canvas元素和JavaScript来实现樱花爱心动画效果。它创建了一个canvas元素，并在其中绘制了多个樱花对象，通过更新樱花的位置和绘制樱花来实现动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值