Vue3制作一个初级血轮眼

  • 2023/8/13
  • 阅读时间 2 分钟

近日见闻

  1. 美国普渡大学的研究发现，OpenAI 开发的人工智能聊天机器人 ChatGPT 在回答软件编程问题时，错误率超过一半，但仍能骗过三分之一的提问者。

  2. 国产“ChatGPT”已超70多家，科大讯飞副总裁钟锟：“赛马”将跑出世界级的大模型。

  3. Stability.ai宣布推出生成式 AI 产品Stable Chat。StableChat是由Stability.ai开发的类ChatGPT生成式AI产品，基于开源大语言模型StableBeluga1/2开发而成。

  4. 据 Analytics India Magazine 的一份报告称，OpenAI 仅运行其人工智能服务 ChatGPT 每天就要花费约 70 万美元。OpenAI 目前正处于烧钱的状态，尽管该公司试图通过 GPT-3.5 和 GPT-4 来实现盈利，但该目前还没有能够产生足够的收入来实现收支平衡。

使用vue3制作一个简单的血轮眼

想必作为90后的不少朋友应该是火影忍者的动漫迷，当然包括我。今天周末给大家带来点轻松的项目。

先看下效果图：

Alt text

这里贴一下代码，感兴趣的朋友可以不断完善：


<template>
    <div class="sharingan-container">
      <div class="sharingan-eye">
        <div class="sharingan-ring">
          <div class="sharingan-tomoe-container">
            <div
              class="sharingan-tomoe"
              v-for="(item, index) in tomoeCount"
              :key="index"
              :style="getTomoeStyle(index)"
            ></div>
          </div>
        </div>
        <div class="sharingan-center"></div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref } from "vue";
  
  export default {
    setup() {
      const tomoeCount = ref(3);
  
      const getTomoeStyle = (index) => {
        const angle = (360 / tomoeCount.value) * index;
        const rotation = angle - 30; // 调整初始角度
        const radius = 0; // 距离中心的半径
        const top = -Math.sin(rotation * (Math.PI / 180)) * radius;
        const left = Math.cos(rotation * (Math.PI / 180)) * radius;
        return {
          top: `${top}px`,
          left: `${left}px`,
        };
      };
  
      return {
        tomoeCount,
        getTomoeStyle,
      };
    },
  };
  </script>
  
  <style>
  .sharingan-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: black;
  }
  
  .sharingan-eye {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: rgb(153, 9, 9);
    position: relative;
    overflow: hidden;
  }
  
  .sharingan-ring {
    width: 120px;
    height: 120px;
    border: 3px solid black;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .sharingan-center {
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .sharingan-tomoe-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .sharingan-tomoe {
    width: 20px;
    height: 20px;
    background-color: rgb(0, 0, 0);
    position: absolute;
    border-radius: 50%;
    animation: rotateTomoe 5s linear infinite;
  }
  
  @keyframes rotateTomoe {
    0% {
      transform: translate(-50%, -50%) rotate(45deg) translateX(60px);
    }
    100% {
      transform: translate(-50%, -50%) rotate(405deg) translateX(60px);
    }
  }
  </style>

说说关键的实现就是勾玉的旋转是通过CSS中的动画（@keyframes）来实现的。在代码中，使用了@keyframes rotateTomoe 来定义斗轮旋转的动画。这个动画定义了从初始状态到最终状态的过渡，使斗轮在指定的时间内沿着指定的路径旋转。在动画中，通过不断改变transform属性的值，可以实现勾玉的旋转效果。

vue3