zdog实现游乐场旋转木马动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：zdog实现游乐场旋转木马动画效果代码，还有售票窗口。

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

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

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

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

body {
	color: hsl(12 40% 30%);
	background: hsl(4 87% 99%);
	background: radial-gradient(hsl(4 87% 97%) 10%, transparent 0),
		radial-gradient(hsl(4 87% 97%) 10%, transparent 0);
	background-size: 50px 50px;
	background-position: 0 0, 25px 25px;
	min-block-size: 100svb;
	display: grid;
	place-items: center;
}

svg {
	display: block;
	inline-size: 10rem;
	block-size: auto;
	position: absolute;
	inset-inline-end: 0.5rem;
	inset-block-end: 0.5rem;
}

svg.open .notice {
	opacity: 1;
}
</style>



  
  
</head>

<body translate="no">
  <canvas style="display: block; inline-size: 100%; max-inline-size: 400px" width="400" height="350"></canvas>

<svg style="display: block;" viewBox="-38 -36 76 84" width="76" height="84">
	<g stroke-linecap="round" stroke-linejoin="round">
		<path fill="hsl(3 76% 79%)" d="M -36 0 A 36 36 0 0 1 36 0" />
		<path fill="hsl(14 84% 85%)" d="M -29 0 A 29 29 0 0 1 29 0" />
		<rect fill="hsl(18 38% 95%)" x="-38" width="76" height="4" rx="2" />
		<rect fill="hsl(18 38% 95%)" x="-35" y="4" width="70" height="40" />
		<rect fill="hsl(3 76% 79%)" x="-36" y="44" width="72" height="4" rx="2" />
		<rect fill="hsl(4 87% 90%)" stroke="hsl(4 82% 80%)" stroke-width="2" x="-15" y="13" width="30" height="30" />
		<g transform="translate(-35 4)">
			<path fill="hsl(3 76% 79%)" d="M 0 0 0 10 A 5 5 0 0 0 10 10 L 10 0 M 20 0 20 10 A 5 5 0 0 0 30 10 L 30 0 M 40 0 40 10 A 5 5 0 0 0 50 10 L 50 0 M 60 0 L 60 10 A 5 5 0 0 0 70 10 L 70 0" />
			<path transform="translate(10 0)" fill="hsl(14 84% 85%)" d="M 0 0 0 10 A 5 5 0 0 0 10 10 L 10 0 M 20 0 20 10 A 5 5 0 0 0 30 10 L 30 0 M 40 0 40 10 A 5 5 0 0 0 50 10 L 50 0" />
		</g>
		<text fill="hsl(21 100% 20%)" stroke="hsl(21 100% 20%)" stroke-width="0.4" font-family="serif" font-size="8" font-weight="700" letter-spacing="1" style="text-transform: uppercase;" text-anchor="middle" y="-6">
			Tickets
		</text>
		<g class="notice" opacity="0" transform="translate(10 44)">
			<rect transform="translate(-7.5 -12) skewX(10)" fill="hsl(15 60% 80%)" width="26" height="12" />
			<rect transform="translate(-7.5 -12) skewX(-10)" fill="hsl(18 50% 99%)" width="26" height="12" />
			<text transform="translate(3.25 -3) skewX(-10)" fill="hsl(21 100% 20%)" stroke="hsl(21 100% 20%)" stroke-width="0.3" font-family="serif" font-size="7.25" style="text-transform: uppercase;" text-anchor="middle">
				Open
			</text>
		</g>
	</g>
</svg>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script  >
const { Anchor, Cylinder, Ellipse, Shape, TAU } = Zdog;

(() => {
  const colors = {
    center: "hsl(13 79% 75%)",
    base: ["hsl(3 76% 79%)", "hsl(4 78% 73%)"],
    top: "hsl(14 84% 85%)",
    tent: ["hsl(18 38% 95%)", "hsl(14 84% 85%)"],
    horses: [
    ["hsl(4 57% 89%)", "hsl(338 70% 82%)"],
    ["hsl(35 92% 76%)", "hsl(48 89% 79%)"]] };



  const strokes = {
    center: 1,
    base: 1,
    top: 8,
    stripe: 0,
    arc: 1,
    pole: 1,
    horse: 1 };


  const heights = {
    center: 40,
    base: 4,
    tent: 20 };


  const diameters = {
    center: 6,
    base: [90, 95],
    tent: 90 };


  const copies = {
    stripes: 16,
    horses: 8 };


  const offset = 6;

  const root = new Anchor();

  const carousel = new Anchor({
    addTo: root });


  const horses = new Anchor({
    addTo: carousel });


  new Shape({
    addTo: root,
    color: colors.top,
    fill: true,
    stroke: strokes.top,
    translate: {
      y: (heights.center / 2 + heights.tent + strokes.top / 2) * -1 } });



  const base = new Ellipse({
    addTo: root,
    color: colors.base[0],
    stroke: strokes.base,
    fill: true,
    diameter: diameters.base[0],
    translate: {
      y: heights.center / 2 + (strokes.base + strokes.center) / 2 },

    rotate: {
      x: TAU / 4 } });



  new Ellipse({
    addTo: base,
    color: colors.base[1],
    stroke: strokes.base,
    fill: true,
    diameter: diameters.base[1],
    translate: {
      z: strokes.base * -1 } });



  new Shape({
    addTo: base,
    color: colors.base[1],
    stroke: strokes.base,
    fill: true,
    path: [
    { x: diameters.base[1] / 2 * -1, y: 0, z: 0 },
    {
      arc: [
      { x: diameters.base[1] / 2 * -1, y: diameters.base[1] / 2, z: 0 },
      { x: 0, y: diameters.base[1] / 2, z: 0 }] },


    {
      arc: [
      { x: diameters.base[1] / 2, y: diameters.base[1] / 2, z: 0 },
      { x: diameters.base[1] / 2, y: 0, z: 0 }] },


    { x: diameters.base[1] / 2, y: 0, z: heights.base * -1 },
    {
      arc: [
      {
        x: diameters.base[1] / 2,
        y: diameters.base[1] / 2,
        z: heights.base * -1 },

      { x: 0, y: diameters.base[1] / 2, z: heights.base * -1 }] },


    {
      arc: [
      {
        x: diameters.base[1] / 2 * -1,
        y: diameters.base[1] / 2,
        z: heights.base * -1 },

      { x: diameters.base[1] / 2 * -1, y: 0, z: heights.base * -1 }] }],



    translate: {
      z: strokes.base * -1 } });



  const center = new Cylinder({
  .........完整代码请登录后点击上方下载按钮下载查看