zdog实现三维文字牌旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：zdog实现三维文字牌旋转动画效果代码

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

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

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

  
<style>
body {
	margin: 0;
	color: hsl(0 0% 100%);
	background: hsl(233 12% 13%);
	font-family: system-ui;
	min-block-size: 100svb;
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	--ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
	--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

canvas {
	display: block;
	inline-size: 100%;
	max-inline-size: 500px;
}

button {
	--angle: 115deg;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: hsl(0 0% 100%);
	background: hsl(225 10% 8%);
	padding: 0.5rem 1rem;
	border: 3px solid;
	border-image-slice: 1;
	border-image-source: linear-gradient(
		var(--angle),
		hsl(135 57% 56%),
		hsl(48 95% 63%),
		hsl(270 71% 65%),
		hsl(197 99% 53%),
		hsl(144 58% 54%)
	);
}

@supports (background: paint(canvas)) {
	@property --angle {
		syntax: "<angle>";
		initial-value: 0deg;
		inherits: false;
	}

	button {
		--angle: 0deg;
		transition: --angle 1s var(--ease-in-out-sine);
	}

	button:hover,
	button:focus {
		--angle: -180deg;
	}

	button:focus {
		outline-offset: 4px;
	}

	button:active {
		--angle: -200deg;
	}

	button[data-state="spin"] {
		transition-duration: 0.4s;
		transition-timing-function: var(--ease-out-back);
		--angle: 0deg;
	}
}
</style>

  
  
</head>

<body translate="no">
  <canvas width="500" height="350"></canvas>
<button>Spin</button>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script  >
const { Anchor, Group, Shape, Cylinder, TAU } = Zdog;

(() => {
  const easeInOutBack = x => {
    const c1 = 1.70158;
    const c2 = c1 * 1.525;

    return x < 0.5 ?
    Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 :
    (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
  };

  const colors = {
    text: "hsl(0 0% 100%)",
    spindle: ["hsl(209, 14%, 37%)", "hsl(211, 12%, 43%)", "hsl(211, 10%, 53%)"] };


  const stroke = 0;

  const root = new Anchor();

  const letters = new Anchor({
    addTo: root,
    translate: {
      x: 10,
      y: -3 },

    rotate: {
      x: TAU / 16 * 1,
      y: TAU / 16 } });



  const spindle = new Anchor({
    addTo: root,
    translate: {
      x: -18,
      y: -8.5 },

    rotate: {
      y: 1 } });



  const origin = new Anchor({
    addTo: spindle,
    translate: {
      y: 0 },

    rotate: {
      x: -0.1,
      z: 0.3 } });



  const spinTop = new Anchor({
    addTo: origin,
    rotate: {
      x: origin.rotate.x * -1,
      z: origin.rotate.z * -1 } });



  new Cylinder({
    addTo: spinTop,
    color: colors.spindle[0],
    stroke,
    diameter: 6,
    length: 12,
    translate: {
      y: 12 / 2 * -1 },

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



  new Shape({
    addTo: spinTop,
    color: colors.spindle[2],
    stroke,
    fill: true,
    path: [
    { x: 10, z: -10 },
    { x: 10, z: 10 },
    { x: -10, z: 10 },
    { x: -10, z: -10 }] });



  const face = new Shape({
    color: colors.spindle[1],
    stroke,
    fill: true,
    path: [
    { x: -10, y: 0, z: 10 },
    { x: 10, y: 0, z: 10 },
    { x: 10, y: 15, z: 10 },
    {
      arc: [
      { x: 10, y: 20, z: 10 },
      { x: 0, y: 20, z: 10 }] },


    {
      arc: [
      { x: -10, y: 20, z: 10 },
      { x: -10, y: 15, z: 10 }] }] });





  const bottom = new Shape({
    color: colors.spindle[0],
    stroke,
    fill: true,
    path: [
    { x: 10, y: 15, z: 10 },
    {
      arc: [
      { x: 10, y: 20, z: 10 },
      { x: 0, y: 20, z: 10 }] },


    {
      arc: [
      { x: -10, y: 20, z: 10 },
      { x: -10, y: 15, z: 10 }] },


    {
      arc: [
      { x: -10, y: 30, z: 10 },
      { x: 0, y: 30, z: 0 }] },


    {
      arc: [
      { x: 10, y: 30, z: 10 },
      { x: 10, y: 15, z: 10 }] }] });





  const c = new Shape({
    closed: false,
    rotate: { z: TAU / 8 },
    path: [
    { x: 0, y: -3.5 },
    {
      arc: [
      { x: -3.5, y: -3.5 },
      { x: -3.5, y: 0 }] },


    {
      arc: [
      { x: -3.5, y: 3.5 },
      { x: 0, y: 3.5 }] },


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