splinecode三维apple watch手表效果代码-html代码-BFW代码库

splinecode三维apple watch手表效果代码

代码语言：html

所属分类：三维

代码描述：splinecode三维apple watch手表效果代码

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

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

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

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

#container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
  height: 100% !important;

}
#canvas3d{
  width: 100% !important;
  height: 100% !important;
}

.swatch {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 10px;
  opacity: 0;
  cursor: pointer;
}
#swatches {
  display: flex;
  align-content: center;
  justify-content: center;
}
.swatch:nth-child(1) {
  background-color: #00B7D1;
}
.swatch:nth-child(2) {
  background-color: #DEDEE0;
}
.swatch:nth-child(3) {
  background-color: #7761C2;
}
.swatch:nth-child(4) {
  background-color: #DF7331;
}
.swatch:nth-child(5) {
  background-color: #E41ABD;
}

.selected {
-webkit-transition: outline-color .24s ease-in;
   -moz-transition: outline-color .24s ease-in;
     -o-transition: outline-color .24s ease-in;
        transition: outline-color .24s ease-in;
  outline: solid rgba(243,243,243,0.8) 3px;  
  outline-offset: 4px;
}
</style>


  
  
</head>

<body translate="no">
  <div id='container'>
  <canvas id="canvas3d"></canvas>
</div>
<div id="swatches">
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
<div class="swatch"></div>
  </div>
  <script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CustomEase3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CustomWiggle3.min.js"></script>
      <script  type="module">
const fileName = "VX7WzfvhjQGTVA1N";

function r2d(r) {
  return r * (180 / Math.PI);
}
function d2r(d) {
  return d * (Math.PI / 180);
}
function objectArray(all, name) {
  return all.filter(item => item.name == name);
}
const timelineObject = {
  repeat: -1,
  defaults: {
    ease: 'elastic(0.5, 0.43)',
    duration: 1 } };


import { Application } from "https://esm.sh/@splinetool/runtime";
con.........完整代码请登录后点击上方下载按钮下载查看