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

zdog实现文字层三维旋转动画效果代码

代码语言：html

所属分类：三维

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

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body {
  background-color: #80f9af;
  margin: 0;
  overflow: hidden;
}

.zdog-canvas {
  background-color: transparent;
  cursor: move;
}
</style>
</head>
<body>

<canvas class="zdog-canvas" aria-label="cool"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
  
  <script >


const illoElem = document.querySelector('canvas');
const TAU = Zdog.TAU;
const c_01 = 'hsl(336, 100%, 70%)'; // Pink
const c_02 = 'hsl(59, 100%, 70%)'; // Yellow
const c_03 = 'hsl(233, 100%, 57%)'; // Blue 
const c_04 = 'hsl(60, 100%, 97%)'; // Whitish
const letterSize = 90; // Resize graphic here
const letterHalf = letterSize / 2;
const letterStroke = letterSize / 2.5;

illoElem.setAttribute('width', window.innerWidth);
illoElem.setAttribute('height', window.innerHeight);

const illo = new Zdog.Illustration({
  element: illoElem,
  dragRotate: true });


// Word
const letters = new Zdog.Group({
  addTo: illo });

const c = new Zdog.Ellipse({
  addTo: letters,
  width: letterSize,
  height: letterSize,
  quarters: 2,
  stroke: letterStroke,
  color: c_01,
  rotate: { z: TAU / 2 }, // Let's mirror the half circle
  translate: { x: letterSize * -1.85 } });

const o = new Zdog.Ellipse({
  addTo: letters,
  width: letterSize,
  height: letterSize,
  stroke: letterStroke,
  color: c_01,
  translate: { x: letterSize * -0.85 } });
.........完整代码请登录后点击上方下载按钮下载查看