## 近日见闻
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后的不少朋友应该是火影忍者的动漫迷，当然包括我。今天周末给大家带来点轻松的项目。
先看下效果图：
这里贴一下代码，感兴趣的朋友可以不断完善：
代码语言：javascript复制
<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属性的值，可以实现勾玉的旋转效果。
