更新

Author: murisans

content/works/circular-transition-animation.html

@@ -0,0 +1,23 @@
+<h2>About This Animation</h2>
+<p>This demo showcases smooth circular animations using CSS transitions. The circles dynamically update with randomized properties, creating an engaging visual effect.</p>
+
+<h3>Technical Implementation</h3>
+
+<h4>HTML Structure</h4>
+<p>A container element with the ID "app" serves as the animation canvas, containing multiple circle elements with the class "circle". Each circle is positioned absolutely within the container to allow layering effects.</p>
+
+<h4>CSS Styling</h4>
+<p>The container is set to 500x500 pixels with a black background and relative positioning. Each circle uses CSS variables for radius definition, with a white border and 50% border-radius to create perfect circles. The circles are centered using absolute positioning combined with transform translate, ensuring they remain centered even when their size changes. A 0.2-second transition is applied to width and height properties for smooth animations.</p>
+
+<h4>JavaScript Logic</h4>
+<p>Using jQuery, a DOM-ready callback initializes the animation. Every 100 milliseconds, an interval triggers updates for all circle elements. For each circle, a random radius between 0 and 500 pixels is generated using Math.random(). The circle's height and width are updated to this new radius, and the border width is randomized between -7 and 3 pixels. This continuous randomization creates dynamic and unpredictable visual movement.</p>
+
+<h4>Key Features</h4>
+<p>The animation leverages CSS transitions to ensure smooth property changes, while JavaScript provides the dynamic behavior through interval-based updates. The combination of random radius, border width variation, and smooth transitions creates an engaging visual effect with layered circles appearing to breathe and morph continuously.</p>
+
+<p class="codepen" data-theme-id="dark" data-height="600" data-pen-title="Circular Transition Animation" data-default-tab="result" data-slug-hash="LEbzRjZ" data-user="murisans" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
+  <span>See the Pen <a href="https://codepen.io/murisans/pen/LEbzRjZ">
+  Circular Transition Animation</a> by 赵金灏 (<a href="https://codepen.io/murisans">@murisans</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://public.codepenassets.com/embed/index.js"></script>

css/style.css

@@ -677,6 +677,13 @@ footer a:hover {
   border: 1px solid var(--border-color);
 }
 
+.work-item .date {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.75rem;
+  display: inline-block;
+}
+
 .work-item h3 {
   font-size: 1.5rem;
   font-weight: 600;

js/components/WorkItem.js

@@ -1,6 +1,7 @@
-const WorkItem = ({ title, description, techStack, onClick }) => {
+const WorkItem = ({ title, description, techStack, date, onClick }) => {
   return (
     <div className="work-item" onClick={onClick}>
+      <span className="date">{date}</span>
       <h3>{title}</h3>
       <p>{description}</p>
       <div className="tech-stack">

js/data/mock.js

@@ -62,6 +62,7 @@ const MockData = {
       tag: 'React',
       description: 'A comprehensive library of WCAG 2.1 compliant form components.',
       techStack: ['React', 'TypeScript', 'WCAG 2.1', 'ARIA'],
+      date: 'March 15, 2024',
       featured: true,
       published: true
     },
@@ -72,18 +73,20 @@ const MockData = {
       tag: 'Design',
       description: 'Foundational design tokens and patterns for consistent product design.',
       techStack: ['CSS Variables', 'Design Tokens', 'Figma'],
+      date: 'April 20, 2024',
       featured: true,
       published: true
     },
     {
       id: 3,
-      slug: 'progressive-image-loading',
-      title: 'Progressive Image Loading',
-      tag: 'Performance',
-      description: 'Image optimization with graceful degradation strategies.',
-      techStack: ['JavaScript', 'Web Performance'],
+      slug: 'circular-transition-animation',
+      title: 'Circular Transition Animation',
+      tag: 'Animation',
+      description: 'Smooth circular animation effects using CSS transitions',
+      techStack: ['CSS', 'Animation', 'Transition'],
+      date: 'May 26, 2024',
       featured: false,
-      published: false
+      published: true
     }
   ]
 };

js/data/works.dev.json

@@ -6,6 +6,7 @@
     "tag": "React",
     "description": "A comprehensive library of WCAG 2.1 compliant form components.",
     "techStack": ["React", "TypeScript", "WCAG 2.1", "ARIA"],
+    "date": "March 15, 2024",
     "featured": true,
     "published": true
   },
@@ -16,7 +17,19 @@
     "tag": "Design",
     "description": "Foundational design tokens and patterns for consistent product design.",
     "techStack": ["CSS Variables", "Design Tokens", "Figma"],
+    "date": "April 20, 2024",
     "featured": true,
     "published": true
+  },
+  {
+    "id": 3,
+    "slug": "circular-transition-animation",
+    "title": "Circular Transition Animation",
+    "tag": "Animation",
+    "description": "Smooth circular animation effects using CSS transitions",
+    "techStack": ["CSS", "Animation", "Transition"],
+    "date": "May 26, 2024",
+    "featured": false,
+    "published": true
   }
 ]

js/data/works.json

@@ -1,32 +1,13 @@
 [
-  {
-    "id": 1,
-    "slug": "accessible-form-components",
-    "title": "Accessible Form Components Library",
-    "tag": "React",
-    "description": "A comprehensive library of WCAG 2.1 compliant form components.",
-    "techStack": ["React", "TypeScript", "WCAG 2.1", "ARIA"],
-    "featured": true,
-    "published": false
-  },
-  {
-    "id": 2,
-    "slug": "design-system-foundation",
-    "title": "Design System Foundation",
-    "tag": "Design",
-    "description": "Foundational design tokens and patterns for consistent product design.",
-    "techStack": ["CSS Variables", "Design Tokens", "Figma"],
-    "featured": true,
-    "published": false
-  },
   {
     "id": 3,
-    "slug": "progressive-image-loading",
-    "title": "Progressive Image Loading",
-    "tag": "Performance",
-    "description": "Image optimization with graceful degradation strategies.",
-    "techStack": ["JavaScript", "Web Performance"],
-    "featured": false,
-    "published": false
+    "slug": "circular-transition-animation",
+    "title": "Circular Transition Animation",
+    "tag": "Animation",
+    "description": "Smooth circular animation effects using CSS transitions",
+    "techStack": ["CSS", "Animation", "Transition"],
+    "date": "May 26, 2024",
+    "featured": true,
+    "published": true
   }
 ]

js/pages/ArticlesPage.js

@@ -18,6 +18,20 @@ const ArticlesPage = () => {
     }
   }, [selectedArticle]);
 
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const openParam = urlParams.get('open');
+    if (openParam && openParam.startsWith('article:')) {
+      const slug = openParam.replace('article:', '');
+      const article = articles.find(a => a.slug === slug);
+      if (article) {
+        setSelectedArticle(article);
+        urlParams.delete('open');
+        window.history.replaceState({}, document.title, `${window.location.pathname}${window.location.hash}?${urlParams.toString()}`);
+      }
+    }
+  }, [articles]);
+
   if (loading) {
     return <div className="loading">Loading...</div>;
   }

js/pages/HomePage.js

@@ -41,7 +41,12 @@ const HomePage = ({ onNavigate }) => {
           ) : (
             <div className="card-grid">
               {articles.map((article) => (
-                <Card key={article.id} tag={article.tag} title={article.title} description={article.description} meta={article.date} onClick={() => onNavigate('articles')} />
+                <Card key={article.id} tag={article.tag} title={article.title} description={article.description} meta={article.date} onClick={() => {
+                  const url = new URL(window.location.href);
+                  url.searchParams.set('open', `article:${article.slug}`);
+                  url.hash = '#articles';
+                  window.location.href = url.toString();
+                }} />
               ))}
             </div>
           )}
@@ -59,7 +64,12 @@ const HomePage = ({ onNavigate }) => {
           ) : (
             <div className="card-grid">
               {works.map((work, index) => (
-                <Card key={work.id} title={work.title} description={work.description} tag={work.techStack[0]} onClick={() => onNavigate('works')} />
+                <Card key={work.id} title={work.title} description={work.description} tag={work.techStack[0]} onClick={() => {
+                  const url = new URL(window.location.href);
+                  url.searchParams.set('open', `work:${work.slug}`);
+                  url.hash = '#works';
+                  window.location.href = url.toString();
+                }} />
               ))}
             </div>
           )}

js/pages/WorksPage.js

@@ -15,9 +15,36 @@ const WorksPage = () => {
   useEffect(() => {
     if (selectedWork) {
       window.scrollTo({ top: 0, behavior: 'smooth' });
+      
+      // 等待DOM更新后初始化CodePen嵌入
+      setTimeout(() => {
+        if (window.__CPEmbed) {
+          window.__CPEmbed();
+        } else {
+          // 如果CodePen脚本还没加载，动态加载
+          const script = document.createElement('script');
+          script.src = 'https://public.codepenassets.com/embed/index.js';
+          script.async = true;
+          document.head.appendChild(script);
+        }
+      }, 100);
     }
   }, [selectedWork]);
 
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const openParam = urlParams.get('open');
+    if (openParam && openParam.startsWith('work:')) {
+      const slug = openParam.replace('work:', '');
+      const work = works.find(w => w.slug === slug);
+      if (work) {
+        setSelectedWork(work);
+        urlParams.delete('open');
+        window.history.replaceState({}, document.title, `${window.location.pathname}${window.location.hash}?${urlParams.toString()}`);
+      }
+    }
+  }, [works]);
+
   if (loading) {
     return <div className="loading">Loading...</div>;
   }
@@ -96,6 +123,7 @@ const WorksPage = () => {
               title={work.title} 
               description={work.description} 
               techStack={work.techStack}
+              date={work.date}
               onClick={() => setSelectedWork(work)}
             />
           ))}