获奖照片弹窗设计

4.0

2025/4/2

zhUI设计弹窗设计动态效果获奖展示

提示语

生成一个获奖照片弹窗，背景是橘黄色，中间有白色奖杯，左上角是第几名红色表示，用动态旋转效果弹出

生成结果

import React, { useEffect, useState } from 'react';
import './App.css';

const App = () => {
  const [showPopup, setShowPopup] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowPopup(true);
    }, 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="App">
      {showPopup && (
        <div className="popup">
          <div className="rank">1st</div>
          <img src="https://placehold.co/150x150" alt="Trophy" className="trophy" />
        </div>
      )}
    </div>
  );
};

export default App;

Open Sandbox