预览成果：
实现源码：
<template> <MenuBtn :open="openMenu" :size="24" /></template><template> <div :class="`menu ${open?'open':''}`" :style="`width:${size}px;height:${size}px`"> <span :style="` transition-duration:${duration}ms; transform:${open?`translateY(${(size-2)/2}px) rotate(-45deg)`:`translateY(${size/6}px)`}; `" /> <span :style="` transition-duration:${duration}ms; ${open?`opacity: 0;transform: rotate(-45deg)`:''} `" /> <span :style="` transition-duration:${duration}ms; transform:${open?`translateY(${-(size-2)/2}px) rotate(45deg)`:`translateY(-${size/6}px)`}; `" /> </div></template><script setup>// 这里用了vue3的专用写法。vue2写法，自行实现。const {open, size, duration} = defineProps({ open: { type: Boolean, default: false, required: true, }, size: { type: Number, default: 24, required: false }, duration: { type: Number, default: 300, required: false }});</script><style scoped lang="scss">.menu { position: relative; display: flex; align-items: center; justify-content: space-between; flex-direction: column; span { height: 2px; border-radius: 2px; display: flex; width: 100%; background-color: #333; }}</style>源码阐明：
带有变量的款式，都写在行内了，因为这样适宜用在任意场景下。
// nuxt3 npx nuxi init <project-name>// nuxt2yarn create nuxt-app <project-name>// vue-clivue create <project-name>// vitenpm init vite-app <project-name>其余场景：
vite能够间接在style标签中应用js变量
npm init vite-app <project-name><template> <h1>{color}</h1></template><script>export default { data () { return { color: 'red' } }}</script><style vars="{ color }" scoped>h1 { color: var(--color);}</style>