эффект樱花背景 с использованием canvas

    function init() {
        for (let i = 0; i < 100; i++) {
            petals.push(new Petal());
        }
    }

    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < petals.length; i++) {
            petals[i].update();
            petals[i].draw();
        }
        requestAnimationFrame(animate);
    }

    init();
    animate();
</script>
</body>
</html>

Этот код создает эффект падающих лепестков сакуры на вашем сайте. Вы можете настроить количество лепестков, их цвета и скорость их падения, чтобы добиться желаемого вида.

Поделюсь красивым эффектом樱花背景特效，适用于博客主页

项目发现自于：RuanJiaFeng/html5+canvas烂漫的空中散落的花瓣3D相册 (gitee.com)

Пример (скриншот)

Код

Необходимы только два файла

• index.html

• index.js

Нажмите на index.html, чтобы запустить

Детали использования

• В HTML-файле вставьте тег canvas, вставьте js-файл, возможно, возникнут проблемы с меньше символом, можно просто скопировать весь код из js-файла и вставить его в тег script

• Поскольку canvas занимает пространство на странице, если вы хотите использовать его как фон, добавьте стиль canvas

  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;