<div id="app">
</div>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, #f08, #d0e);
}
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'
}}
animate={
{
x:50, // 向右移动50px
y:20, // 向下移动20px
scale:0.5, // 缩放至0.5倍
rotate:45, // 旋转45度
opacity:0.5 // 不透明度设置为0.5
}
}
>
</motion.div>
)
}
const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
<StrictMode>
<App />
</StrictMode>
)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.