LMY

src/软工界面/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>智能法律服务系统</title>
     <link rel="stylesheet" href="styles0.css">
+    
     <style>
         @keyframes sparkle {
             0%, 100% { opacity: 0; }

src/软工界面/script.js

@@ -202,4 +202,5 @@ var shaderMaterial = new THREE.ShaderMaterial({
   });
   
   var mesh = new THREE.Mesh(geometry, shaderMaterial);
-  scene.add(mesh);
+  scene.add(mesh);
+  

src/软工界面/styles0.css

@@ -813,4 +813,266 @@ header {
 
 .feature:hover {
     animation: flip 15s ease-in-out forwards;
-}
+}
+
+/* 3D翻转动画 */
+.feature {
+    perspective: 1000px; /* 设置3D空间的透视点 */
+}
+
+.feature:hover {
+    animation: flip 1s ease-in-out;
+    transform-style: preserve-3d; /* 保持3D样式 */
+}
+
+@keyframes flip {
+    0% {
+        transform: rotateX(0deg);
+    }
+    100% {
+        transform: rotateX(360deg);
+    }
+}
+/* 玻璃毛玻璃效果 */
+.feature {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* 液态效果 */
+@keyframes liquid {
+    0%, 100% {
+        transform: translateY(0px) scale(1);
+        border-radius: 15px;
+    }
+    50% {
+        transform: translateY(-5px) scale(0.95);
+        border-radius: 30px;
+    }
+}
+
+.feature h2 {
+    animation: liquid 2s infinite;
+}
+
+/* 视差滚动效果 */
+.parallax-background {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background: url('background.jpg');
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: -1;
+}
+
+/* 动态粒子背景 */
+.particle-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    z-index: -1;
+}
+
+.particle {
+    position: absolute;
+    border-radius: 50%;
+    opacity: 0.6;
+}
+
+@keyframes moveParticles {
+    from { transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(0); }
+    to { transform: translate(-50%, -50%) translate3d(var(--x), var(--y), 0) scale(1); }
+}
+
+.particle:nth-child(1) { --x: 10vw; --y: 10vh; animation: moveParticles 10s linear infinite; }
+.particle:nth-child(2) { --x: 20vw; --y: 40vh; animation: moveParticles 15s linear infinite; }
+/* Add more particles with different positions and durations */
+
+
+/* CSS滤镜和色彩变化 */
+.feature:hover {
+    filter: hue-rotate(360deg);
+    transition: filter 2s;
+}
+
+/* CSS伪元素和3D变换 */
+.feature {
+    position: relative;
+    transform-style: preserve-3d;
+}
+
+.feature::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateZ(-1px);
+    z-index: -1;
+}
+
+/* 交互式CSS动画 */
+.feature {
+    transition: transform 0.3s;
+}
+
+.feature:hover {
+    transform: scale(1.1) rotate(5deg);
+}
+
+/* 波纹效果 */
+.feature {
+    position: relative;
+    overflow: hidden;
+}
+
+.feature::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    padding-top: 100%;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.5s;
+}
+
+.feature:hover::before {
+    transform: translate(-50%, -50%) scale(2);
+}
+
+/* 动态阴影效果 */
+.feature {
+    position: relative;
+    transition: box-shadow 0.3s;
+}
+
+.feature::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.1);
+    z-index: -1;
+    transform: scale(0);
+    transition: transform 0.3s;
+}
+
+.feature:hover::after {
+    transform: scale(1.2);
+}
+
+/* 鼠标悬停波纹效果 */
+.feature:hover::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.2) 1%);
+    transition: opacity 0.3s;
+    animation: ripple 0.4s linear;
+    opacity: 0;
+}
+
+@keyframes ripple {
+    0% {
+        transform: scale(0);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(3);
+        opacity: 0;
+    }
+}
+
+
+/* 视差效果 */
+.parallax-section {
+    perspective: 1px;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.parallax-section__inner {
+    transform: translateZ(-1px) scale(2);
+}
+
+.parallax-section__layer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.parallax-section__layer--back {
+    transform: translateZ(-2px) scale(3);
+}
+
+.parallax-section__layer--base {
+    transform: translateZ(0);
+}
+
+.parallax-section.is-scrolling {
+    pointer-events: none;
+}
+
+
+/* 点击波纹效果 */
+.ripple-effect {
+    position: relative;
+    overflow: hidden;
+}
+
+.ripple-effect::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    background: rgba(0, 0, 0, 0.4);
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: transform 0.5s, opacity 1s;
+    opacity: 0;
+}
+
+.ripple-effect:hover::before {
+    transform: translate(-50%, -50%) scale(2.5);
+    opacity: 1;
+}
+
+.ripple-effect:active::before {
+    transition: 0s;
+    opacity: 0;
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+  
+  a:hover {
+    animation: fadeOut 0.5s forwards; /* 鼠标悬停时开始动画 */
+  }
+  
+  a:active {
+    animation: none; /* 点击时停止动画 */
+  }