zdog实现玫瑰花盛开动画效果代码-html代码-BFW代码库

zdog实现玫瑰花盛开动画效果代码

代码语言：html

所属分类：动画

代码描述：zdog实现玫瑰花盛开动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	background: hsl(214 14% 10%);
	min-block-size: 100svb;
	display: grid;
	place-items: center;
	font-family: system-ui;
}
</style>

  
  
  
</head>

<body translate="no">
  <canvas style="display: block; inline-size: 100%; max-inline-size: 350px" width="350" height="520"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script >
const { Anchor, Shape, Ellipse, Cone, TAU } = Zdog;

(() => {
  const sineIn = t => {
    const v = Math.cos(t * Math.PI * 0.5);
    if (Math.abs(v) < 1e-14) return 1;else
    return 1 - v;
  };

  const backOut = t => {
    const s = 1.70158;
    return --t * t * ((s + 1) * t + s) + 1;
  };

  const colors = {
    snowflake: [
    { h: 209, s: 77, l: 43 },
    { h: 207, s: 91, l: 64 }],

    stem: [
    { h: 339, s: 69, l: 38 },
    { h: 339, s: 76, l: 59 }],

    petals: ["hsl(339 68% 45%)", "hsl(339 67% 52%)", "hsl(339 76% 59%)"],
    soil: "hsl(339 69% 38%)",
    particles: "hsl(336 100% 94%)" };


  const strokes = {
    snowflake: 3,
    stem: 2,
    petals: 3,
    soil: 2,
    particles: 1,
    spikes: 1 };


  c.........完整代码请登录后点击上方下载按钮下载查看