init

2025-11-20 11:03:10 +08:00
commit 0a5cc64d0e
14 changed files with 884 additions and 0 deletions
--- a/css3/02-interactive-card-collection/index.html
+++ b/css3/02-interactive-card-collection/index.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>高级CSS挑战 - 交互式卡片</title>
+        <style>
+            .card-collection {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+                gap: 2rem;
+                padding: 2rem;
+                perspective: 1000px;
+            }
+
+            .card {
+                background: white;
+                border-radius: 20px;
+                padding: 2rem;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+                transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+                position: relative;
+                overflow: hidden;
+                transform-style: preserve-3d;
+            }
+
+            .card::before {
+                content: "";
+                position: absolute;
+                inset: 0;
+                background: linear-gradient(
+                    45deg,
+                    transparent 40%,
+                    rgba(255, 255, 255, 0.3) 50%,
+                    transparent 60%
+                );
+                animation: shine 3s infinite;
+                pointer-events: none;
+            }
+
+            @keyframes shine {
+                0% {
+                    transform: translateX(-100%) rotate(45deg);
+                }
+                100% {
+                    transform: translateX(200%) rotate(45deg);
+                }
+            }
+
+            .card:hover {
+                transform: translateY(-10px) rotateX(5deg);
+                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+            }
+
+            .card:nth-child(odd) {
+                clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+            }
+
+            .card:nth-child(even) {
+                clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
+            }
+
+            .card-content {
+                transform: translateZ(50px);
+            }
+
+            .card::after {
+                content: "";
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 4px;
+                background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
+                transform: scaleX(0);
+                transition: transform 0.3s ease;
+            }
+
+            .card:hover::after {
+                transform: scaleX(1);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="card-collection">
+            <div class="card">
+                <div class="card-content">
+                    <h3>创意设计</h3>
+                    <p>探索无限的设计可能性</p>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-content">
+                    <h3>用户体验</h3>
+                    <p>打造卓越的用户体验</p>
+                </div>
+            </div>
+            <div class="card">
+                <div class="card-content">
+                    <h3>前端开发</h3>
+                    <p>构建现代化的Web应用</p>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>