import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion} from "https://esm.sh/framer-motion@8.3.3";


const App = function() {
  
  return (
    <motion.div
      style={{
        width:100,
        height:100,
        backgroundColor:'white',
        borderRadius:'20px'
      }}
      // 以下三个属性
      // 是motion组件提供的能力
      
      // 实现鼠标悬浮的效果
      whileHover={{
        rotate:45,
        scale:1.2
      }}
      // 让元素可以随意拖拽
      drag
      // 元素放手后会自动回到起始点
      dragSnapToOrigin
      >
    </motion.div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)