diff --git a/doc/~$_软件设计规格说明书-模板.docx b/doc/~$_软件设计规格说明书-模板.docx new file mode 100644 index 0000000..bdb25f6 Binary files /dev/null and b/doc/~$_软件设计规格说明书-模板.docx differ diff --git a/doc/~$_软件需求规格说明书-模板.docx b/doc/~$_软件需求规格说明书-模板.docx new file mode 100644 index 0000000..fd924ed Binary files /dev/null and b/doc/~$_软件需求规格说明书-模板.docx differ diff --git a/model/分析类图.png b/model/分析类图.png index 7d779d6..17cf2b7 100644 Binary files a/model/分析类图.png and b/model/分析类图.png differ diff --git a/model/法律咨询用例顺序图.png b/model/法律咨询用例顺序图.png index 1eeefa3..61b6e36 100644 Binary files a/model/法律咨询用例顺序图.png and b/model/法律咨询用例顺序图.png differ diff --git a/model/界面流顺序图.png b/model/界面流顺序图.png new file mode 100644 index 0000000..f81d03d Binary files /dev/null and b/model/界面流顺序图.png differ diff --git a/model/软件体系结构设计.png b/model/软件体系结构设计.png new file mode 100644 index 0000000..12f31f6 Binary files /dev/null and b/model/软件体系结构设计.png differ diff --git a/src/软工界面/case-matching.html b/src/软工界面/case-matching.html index ec34d50..a47a06e 100644 --- a/src/软工界面/case-matching.html +++ b/src/软工界面/case-matching.html @@ -4,7 +4,7 @@ 案件匹配 - +
@@ -23,7 +23,7 @@

© 2024 智能法律服务系统

- + \ No newline at end of file diff --git a/src/软工界面/consultation.html b/src/软工界面/consultation.html index ae1bb85..0422d14 100644 --- a/src/软工界面/consultation.html +++ b/src/软工界面/consultation.html @@ -4,7 +4,7 @@ 法律咨询 - +
@@ -23,7 +23,7 @@

© 2024 智能法律服务系统

- + \ No newline at end of file diff --git a/src/软工界面/css/styles0.css b/src/软工界面/css/styles0.css new file mode 100644 index 0000000..836d1d6 --- /dev/null +++ b/src/软工界面/css/styles0.css @@ -0,0 +1,1078 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f8f8f8; +} + +header { + background-color: #d9534f; + color: #fff; + padding: 20px 0; + text-align: center; +} + +header h1 { + margin: 0; +} + +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; +} + +.login-btn { + background-color: #fff; + color: #d9534f; + padding: 10px 20px; + text-decoration: none; + border-radius: 5px; +} + +main { + padding: 20px; +} + +.feature-container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.feature-row { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 20px; +} + +.feature { + background-color: #fff; + border: 1px solid #d9534f; + border-radius: 10px; + margin: 10px; + padding: 20px; + text-align: center; + width: calc(20% - 20px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +.feature:hover { + transform: translateY(-5px); +} + +.feature h2 { + color: #d9534f; + margin: 10px 0; +} + +.feature p { + color: #333; + margin: 0; +} + +footer { + background-color: #fe5b56; + color: #fff; + text-align: center; + padding: 10px 0; + position: fixed; + bottom: 0; + width: 100%; +} +/* 基本重置 */ +body, h1, h2, p, a { + margin: 0; + padding: 0; + text-decoration: none; + color: #fff; +} + +/* 主题颜色 */ +:root { + --primary-color: #ff5751; + --secondary-color: rgb(95, 95, 95); +} + +/* 基础字体和背景 */ +body { + font-family: 'Arial', sans-serif; + background-color: #222; + color: #fff; +} + +/* 顶栏样式 */ +header { + background-color: var(--primary-color); + padding: 20px 0; + text-align: center; +} + +/* 登录按钮样式 */ +.login-btn { + background-color: #000; + color: var(--primary-color); + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s, transform 0.3s; +} + +.login-btn:hover { + background-color: #fff; + transform: scale(1.1); +} + +/* 主要内容容器 */ +.feature-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; /* 增加元素之间的间距 */ + padding: 20px; +} + +/* 功能行样式 */ +.feature-row { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 20px; + transition: opacity 0.5s; +} + +.feature-row:hover { + opacity: 0.8; +} + +/* 功能模块样式 */ +.feature { + background-color: #000; + border: 2px solid var(--primary-color); + border-radius: 10px; + padding: 20px; + text-align: center; + width: calc(20% - 20px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); + transition: transform 0.3s, box-shadow 0.3s; + position: relative; /* 用于伪元素定位 */ + overflow: hidden; /* 隐藏溢出的内容 */ +} + +.feature:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(255, 255, 255, 0.7); +} + +/* 功能标题和段落样式 */ +.feature h2, .feature p { + margin: 10px 0; +} + +/* 鼠标悬停时的动态效果 */ +.feature:hover::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.1); + pointer-events: none; + transition: opacity 0.3s; + opacity: 0; +} + +.feature:hover::after { + opacity: 1; +} + +/* 页脚样式 */ +footer { + background-color: var(--primary-color); + color: #fff; + text-align: center; + padding: 10px 0; + position: fixed; + bottom: 0; + width: 100%; +} + +/* 动画效果 */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +/* 应用动画 */ +.feature { + animation: fadeIn 1s ease-in-out; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .feature-container { + flex-direction: column; + align-items: center; + } + + .feature-row { + width: 100%; + flex-direction: column; + align-items: center; + } + + .feature { + width: calc(50% - 20px); + margin: 10px 0; + } +} + +/* 动态阴影效果 */ +@keyframes shadowPulse { + 0% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } + 50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); } + 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } +} + +.feature:hover { + transform: translateY(-5px); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); + animation: shadowPulse 1.5s infinite; +} + +/* 内容淡入效果 */ +@keyframes fadeInContent { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +.feature { + animation: fadeInContent 1s ease-in-out; +} + +/* 现代CSS技巧 */ +.feature { + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .feature { + width: calc(100% - 20px); + } +} + +/* 动态按钮效果 */ +.login-btn { + position: relative; + overflow: hidden; +} + +.login-btn::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 300%; + height: 200%; + background: rgba(255, 255, 255, 0.2); + transform: translate(-50%, -50%) rotate(45deg); + transition: all 0.5s; +} + +.login-btn:hover::before { + width: 100%; + height: 100%; +} + +/* 动态文字效果 */ +@keyframes textGlow { + 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } + 50% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); } +} + +h1, .feature h2 { + animation: textGlow 1.5s infinite alternate; +} + +/* 页面实时动画背景 */ +@keyframes moveBackground { + 0% { transform: translateX(0); } + 50% { transform: translateX(-50px); } + 100% { transform: translateX(0); } +} + +.background-animate { + animation: moveBackground 10s linear infinite; +} +/* 光点闪烁效果 */ +@keyframes sparkleAnimation { + 0% { opacity: 0; transform: scale(0); } + 50% { opacity: 1; transform: scale(1); } + 100% { opacity: 0; transform: scale(0); } +} + +.sparkle-point { + position: absolute; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.8); + pointer-events: none; + animation: sparkleAnimation 2s infinite; +} + +/* 动态渲染效果 */ +@keyframes renderEffect { + 0%, 100% { filter: grayscale(0); } + 50% { filter: grayscale(1); } +} + +.render-effect { + animation: renderEffect 5s infinite alternate; +} + +/* 全屏背景动画 */ +@keyframes backgroundAnimation { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +.background-animate { + animation: backgroundAnimation 30s linear infinite; + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 255, 255, 0.1) 75%, transparent); + background-size: 200% 200%; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; +} +/*粒子背景 */ +.particle-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000; + z-index: -1; + } + + .particle { + fill: #fff; + opacity: 0.6; + animation: moveParticles 10s infinite linear; + } + + @keyframes moveParticles { + 0% { transform: translate(0, 0); } + 100% { transform: translate(100px, 100px); } + } + +/* 光效效果*/ + @keyframes particle-animation { + 0% { + transform: translateY(0) scale(1); + opacity: 1; + } + 100% { + transform: translateY(-100vh) scale(0); + opacity: 0; + } + } + + .particle { + position: absolute; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.6); + animation: particle-animation 5s linear infinite; + } + + @keyframes glowEffect { + 0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.8), 0 0 40px #fb6f6f, 0 0 70px #fb6f6f} + 50% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 255, 255, 0.2), 0 0 15px rgba(255, 255, 255, 0.3), 0 0 20px #fb6f6f, 0 0 35px #fb6f6f} + } + + .feature { + animation: glowEffect 3s infinite alternate; + } + /*线条动画*/ + @keyframes lineAnimation { + 0%, 100% { stroke-dasharray: 0 300; } + 50% { stroke-dasharray: 300 0; } + } + + .dynamic-line { + animation: lineAnimation 1s infinite; + } + + @keyframes gradient-text { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } + } + +/*文字跳动效果*/ + @keyframes jump { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } + } + + .pulse { + animation: jump 1.5s ease-in-out infinite; + font-size: 2rem; + } + + /*文字发光效果*/ + @keyframes glow { + 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(255, 255, 255, 0.8), 0 0 20px #ff00ff, 0 0 25px #ff00ff, 0 0 30px #ff00ff, 0 0 35px #ff00ff; } + 50% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.3), 0 0 10px rgba(255, 255, 255, 0.2), 0 0 15px rgba(255, 255, 255, 0.3), 0 0 20px #ff00ff, 0 0 30px #ff00ff, 0 0 35px #ff00ff, 0 0 40px #ff00ff; } + } + + .glow-text { + font-size: 3rem; + color: #fff; + animation: glow 1.5s infinite; + } + /* 3D文字效果*/ + .three-d-text { + font-size: 3rem; + color: #000; + text-transform: uppercase; + transform: rotateX(45deg) rotateY(45deg); + transform-style: preserve-3d; + perspective: 600px; + margin: 100px; + } +.shatter-text { + font-size: 3rem; + color: #000; + animation: shatter 5s infinite; +} +/*文字打字机效果*/ +@keyframes typewriter { + 0% { width: 0; } + 100% { width: 100%; } + } + + .typewriter { + font-family: monospace; + overflow: hidden; + white-space: nowrap; + width: 100%; + animation: typewriter 4s steps(40) 1s infinite; + } + /*.文字闪烁效果*/ + @keyframes blinker { + 50% { opacity: 0; } + } + + .blink-text { + font-size: 2rem; + color: #000; + animation: blinker 1s linear infinite; + } +/*响应式图片*/ + img { + max-width: 100%; + height: auto; + } +/*容器和布局*/ + .feature-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 20px; + } + + .feature-row { + display: flex; + justify-content: center; + width: 100%; + } + + .feature { + flex: 1 1 20%; /* 每个功能模块占据20%的宽度，至少 */ + margin: 10px; + text-align: center; + } + + @media (max-width: 768px) { + .feature { + flex: 1 1 50%; /* 在较小屏幕上，功能模块占据50%的宽度 */ + } + } + + @media (max-width: 480px) { + .feature { + flex: 1 1 100%; /* 在非常小的屏幕上，功能模块占满整个宽度 */ + } + } + /*背景和SVG粒子效果*/ + .particle-background { + position: fixed; + top: 0; + left: 0; + pointer-events: none; /* 确保SVG不会干扰页面上的交互 */ + } + + .particle { + fill: rgba(255, 255, 255, 0.8); + } + /*动态线条效果*/ + .dynamic-line { + stroke-dasharray: 300; + stroke-dashoffset: 300; + animation: dash 3s linear infinite; +} + +@keyframes dash { + from { + stroke-dashoffset: 300; + } + to { + stroke-dashoffset: 0; + } +} +/*顶部栏和登录按钮*/ +.header { + background-image: url('/image/banner-1.jpg'); + background-size: cover; + background-position: top; + height: 400px; +} + +.top-bar { + position: absolute; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; /* 居中对齐 */ + align-items: center; /* 垂直居中 */ + padding: 10px; + background-color: transparent; +} + +.login-btn { + position: absolute; + left: 10px; /* 登录按钮位置 */ + color: white; + background-color: transparent; + border: none; + text-decoration: none; +} + +h1 { + color: white; + background-color: transparent; + margin: 0; /* 去掉默认边距 */ +} + + /*图片置顶*/ + +/* 登录按钮样式 */ +.login-btn:hover { + background-color: rgba(255, 255, 255, 0.3); /* 鼠标悬停时按钮背景更深 */ +} + +/* 背景图片样式 */ +header { + position: relative; /* 定位相对，以便子元素可以相对于它定位 */ + height: 250px; /* 增加高度，根据需要调整 */ + width: 100%; +} + +header img { + position: absolute; /* 绝对定位，相对于header */ + top: 0; + left: 0; + width: 100%; /* 宽度占满整个屏幕 */ + height: 100%; /* 高度占满整个header */ + object-fit: cover; /* 确保图片覆盖并填充整个区域 */ + z-index: 0; /* 确保图片在其他内容之下 */ +} +/* 响应式图片样式 */ +img { + max-width: 100%; + height: auto; +} + +/* 阴影脉冲效果 */ +@keyframes shadowPulse { + 0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } + 50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); } +} + +.feature:hover { + animation: shadowPulse 1.5s infinite; +} + +/* 文字跳动效果 */ +@keyframes jump { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} + +h1, .feature h2 { + animation: jump 1.5s ease-in-out infinite; +} + +/* 渐变背景动画 */ +@keyframes gradientBackground { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +header { + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradientBackground 15s ease infinite; +} +.feature-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 20px; + align-items: center; /* 垂直居中 */ +} + +.feature-row { + display: flex; + justify-content: center; + width: 100%; +} + +.feature { + flex: 1 1 20%; /* 每个功能模块占据20%的宽度，至少 */ + margin: 10px; + text-align: center; + transition: transform 0.3s ease; +} + +.feature:hover { + transform: scale(1.05); /* 轻微放大效果 */ +} + +@media (max-width: 768px) { + .feature { + flex: 1 1 50%; /* 在较小屏幕上，功能模块占据50%的宽度 */ + } +} + +@media (max-width: 480px) { + .feature { + flex: 1 1 100%; /* 在非常小的屏幕上，功能模块占满整个宽度 */ + } +} +/**/ +.dynamic-shadow { + transition: box-shadow 0.3s ease-in-out; +} + +.dynamic-shadow:hover { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); +} +/*确保所有元素在不同屏幕尺寸下都能良好显示并居中对齐*/ +@media (max-width: 768px) { + .feature { + flex: 1 1 50%; /* 在较小屏幕上，功能模块占据50%的宽度 */ + } +} + +@media (max-width: 480px) { + .feature { + flex: 1 1 100%; /* 在非常小的屏幕上，功能模块占满整个宽度 */ + } +} +/* 浮动的半透明图形 */ +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } +} + +.floaty { + position: absolute; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.6); + animation: float 5s ease-in-out infinite; +} + +/* 光点闪烁 */ +@keyframes sparkle { + 0%, 100% { opacity: 0; } + 50% { opacity: 1; } +} + +.sparkle-point { + position: absolute; + width: 3px; + height: 3px; + border-radius: 50%; + background-color: white; + animation: sparkle 2s infinite; +} + +/* 文字发光 */ +@keyframes glow { + 0%, 100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff; } + 50% { text-shadow: 0 0 10px #fff;} +} + +.glow-text { + font-size: 3rem; + background: linear-gradient(45deg, #ff9a9e, #fad0c4); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: slide 3s infinite alternate; +} + +@keyframes slide { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +/* 动态背景 */ +@keyframes backgroundPulse { + 0%, 100% { background-size: 100% 100%; } + 50% { background-size: 110% 110%; } +} + + + +/* 粒子背景动画 */ +@keyframes particleBackground { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.particle-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px); + background-size: 100px 100px; + animation: particleBackground 10s infinite linear; + z-index: -1; +} + +/**/ +@keyframes rotate3d { + 0% { transform: rotateY(0deg); } + 100% { transform: rotateY(360deg); } +} + +.feature:hover { + animation: rotate3d 20s infinite linear; + transform-style: preserve-3d; +} + +@keyframes glowEffect { + 0%, 100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } + 50% { box-shadow: 0 0 30px rgba(255, 255, 255, 1); } +} + +.feature:hover { + animation: glowEffect 1.5s infinite alternate; +} +@keyframes shadowEffect { + 0%, 100% { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } + 50% { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); } +} + +.feature:hover { + animation: shadowEffect 2s infinite alternate; +} + +@keyframes flip { + 0%, 100% { transform: rotateY(0deg); } + 50% { transform: rotateY(360deg); } +} + +.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; /* 点击时停止动画 */ + } \ No newline at end of file diff --git a/src/软工界面/css/styles1.css b/src/软工界面/css/styles1.css new file mode 100644 index 0000000..1345e77 --- /dev/null +++ b/src/软工界面/css/styles1.css @@ -0,0 +1,476 @@ +/* 基本重置 */ +body, h1, h2, p, a { + margin: 0; + padding: 0; + text-decoration: none; + color: rgb(255, 255, 255); +} + +/* 基础字体和背景 */ +body { + font-family: 'Arial', sans-serif; + background-color: #f8f8f8; + color: #333; +} + +header { + background-color: #d9534f; + color: #fff; + padding: 20px 0; + text-align: center; +} + +header h1 { + margin: 0; +} + +main { + padding: 20px; + text-align: center; +} + +footer { + background-color: #fe5b56; + color: #fff; + text-align: center; + padding: 10px 0; + position: fixed; + bottom: 0; + width: 100%; +} + +/* 输入框和按钮样式 */ +input[type="text"] { + padding: 10px; + margin: 10px 0; + border: 1px solid #ddd; + border-radius: 5px; + width: calc(100% - 22px); /* 减去padding和border的宽度 */ +} + +button { + padding: 10px 20px; + background-color: #d9534f; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #c9302c; +} + +/* 动画效果 */ +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +header, main, footer { + animation: fadeInDown 1s ease-in-out; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + /* 针对小屏幕的样式调整 */ +} + +/* 动态阴影效果 */ +@keyframes shadowPulse { + 0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } + 50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); } +} + +button:hover { + animation: shadowPulse 1.5s infinite; +} + +/* 文字跳动动画*/ +h1 { + animation: jump 1.5s ease-in-out infinite; +} + +@keyframes jump { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } +} +/* 输入框和按钮的悬停效果*/ +input[type="text"]:hover, button:hover { + border: 1px solid #d9534f; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); +} +/*按钮点击动画*/ +button:active { + transform: scale(0.95); + background-color: #b52b27; +} +/*光晕效果*/ +.glow { + animation: glowEffect 1.5s infinite alternate; +} + +@keyframes glowEffect { + from { + text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d9534f, 0 0 20px #d9534f, 0 0 25px #d9534f, 0 0 30px #d9534f; + } + to { + text-shadow: 0 0 10px #fff, 0 0 20px #d9534f, 0 0 30px #d9534f, 0 0 40px #d9534f, 0 0 50px #d9534f, 0 0 60px #d9534f; + } +} +/* 3D翻转效果*/ +.feature { + perspective: 1000px; +} + +.feature:hover .feature-inner { + transform: rotateY(360deg); + transition: transform 15s; +} +/*视差滚动效果*/ + +.parallax-section { + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} +/* 粒子背景*/ +.particle-background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.particle { + fill: rgba(255, 255, 255, 0.8); + animation: moveParticles 10s infinite linear; +} + +@keyframes moveParticles { + 0% { transform: translate(0, 0); } + 100% { transform: translate(100px, 100px); } +} +/*线条动画*/ +.dynamic-line { + stroke-dasharray: 300; + stroke-dashoffset: 300; + animation: dash 3s linear infinite; +} + +@keyframes dash { + from { + stroke-dashoffset: 300; + } + to { + stroke-dashoffset: 0; + } +} +/*光晕效果*/ +button { + position: relative; + overflow: hidden; +} + +button::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 300%; + height: 200%; + background: rgba(255, 255, 255, 0.2); + transform: translate(-50%, -50%) rotate(45deg); + transition: all 0.5s; +} + +button:hover::before { + width: 100%; + height: 100%; +} +/*闪烁效果*/ +@keyframes blinker { + 50% { opacity: 0; } +} + +.blink-text { + animation: blinker 1s linear infinite; +} +/* 打字机效果*/ +.typewriter { + font-family: monospace; + overflow: hidden; + white-space: nowrap; + width: 100%; + animation: typewriter 4s steps(40) 1s infinite; +} + +@keyframes typewriter { + 0% { width: 0; } + 100% { width: 100%; } +} +/* 3D文字效果*/ +.three-d-text { + transform: rotateX(45deg) rotateY(45deg); + transform-style: preserve-3d; + perspective: 600px; +} +/*渐变文字效果*/ +.gradient-text { + background: -webkit-linear-gradient(45deg, #d9534f, #fe5b56); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} +/*动态阴影效果*/ +.dynamic-shadow { + transition: box-shadow 0.3s ease-in-out; +} + +.dynamic-shadow:hover { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); +} + +/*光点闪烁效果*/ +.sparkle-point { + position: absolute; + border-radius: 50%; + background-color: rgba(255, 255, 255, 0.8); + pointer-events: none; + animation: sparkle 2s infinite; +} + +@keyframes sparkle { + 0% { opacity: 0; transform: scale(0); } + 50% { opacity: 1; transform: scale(1); } + 100% { opacity: 0; transform: scale(0); } +} + +/*动态渲染效果*/ +.render-effect { + animation: renderEffect 5s infinite alternate; +} + +@keyframes renderEffect { + 0%, 100% { filter: grayscale(0); } + 50% { filter: grayscale(1); } +} +/* 全屏背景动画*/ +body { + background: linear-gradient(-45deg, #000, #7c7c7c, #000); + background-size: 400% 1000%; + animation: gradientBG 15s ease infinite; +} + +@keyframes gradientBG { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +/*线条动画*/ +.waves { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 90px; + z-index: -1; +} + + +@keyframes backgroundGradient { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +body { + animation: backgroundGradient 15s ease infinite; +} + +a { + color: #fdfdfd; + +} + +a:hover { + color: #000000; +} + +footer { + position: fixed; + bottom: 0; + width: 100%; + background-color: #d9534f; + color: white; +} +.svg-background { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; /* 确保SVG在内容的后面 */ +} +@keyframes colorShift { + 0% { background-color: #d9534f; } + 50% { background-color: #fe5b56; } + 100% { background-color: #d9534f; } +} +button { + animation: colorShift 3s infinite; +} +.blink { + animation: blink 1s step-start infinite; + } + + @keyframes blink { + 50% { opacity: 0; } + } + input[type="text"]:hover { + background-color: rgba(217, 83, 79, 0.1); + } + .parallax-section { + background-image: url('your-image.jpg'); + background-attachment: fixed; + background-size: cover; + height: 100vh; + } + /*字体动态改变*/ + h2 { + transition: font-size 0.3s; + } + + h2:hover { + font-size: 2em; + } + /*动态内容加载*/ + .main-content { + animation: fadeIn 1s ease-in; + } + + @keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } + } + /* 旋转效果*/ + footer { + transition: transform 0.5s; + } + + footer:hover { + transform: rotate(5deg); + } + + .dynamic-line { + stroke: #d9534f; + stroke-width: 2; + fill: none; + animation: dash 5s linear infinite; +} + +@keyframes dash { + 0% { stroke-dasharray: 0, 100; } + 100% { stroke-dasharray: 100, 0; } +} + + +button { + perspective: 1000px; + } + + button:hover { + transform: rotateX(10deg) rotateY(10deg); + transition: transform 0.3s; + } + /*文字打字效果*/ + .typewriter { + overflow: hidden; + white-space: nowrap; + border-right: .15em solid orange; + animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; + } + + @keyframes typing { + from { width: 0; } + to { width: 100%; } + } + + @keyframes blink-caret { + from, to { border-color: transparent; } + 50% { border-color: orange; } + } + /*旋转加载*/ + .loading { + border: 8px solid #f3f3f3; + border-top: 8px solid #3498db; + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 2s linear infinite; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + /*字体阴影动态*/ + h2 { + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + transition: text-shadow 0.3s ease; + } + + h2:hover { + text-shadow: 0 0 20px rgba(255, 0, 0, 1); + } + /*彩色阴影*/ + button { + box-shadow: 0 4px 20px rgba(217, 83, 79, 0.5); + } + + button:hover { + box-shadow: 0 8px 30px rgba(217, 83, 79, 0.8); + } + + .particle-background { + background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%); + animation: particleAnimation 5s infinite; + } + /*随机粒子背景*/ + @keyframes particleAnimation { + 0% { background-size: 0%; } + 100% { background-size: 100%; } + } + + /*光环效果*/ + header { + box-shadow: 0 0 20px rgba(217, 83, 79, 0.6); + } +/*悬浮按钮效果*/ + button { + transition: transform 0.3s ease; +} + +button:hover { + transform: translateY(-5px); +} + +/*玻璃效果*/ +main { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + border-radius: 10px; + padding: 20px; + } + + \ No newline at end of file diff --git a/src/软工界面/css/styles2.css b/src/软工界面/css/styles2.css new file mode 100644 index 0000000..e69de29 diff --git a/src/软工界面/index.html b/src/软工界面/index.html index bc0ab77..68ed3d4 100644 --- a/src/软工界面/index.html +++ b/src/软工界面/index.html @@ -3,8 +3,8 @@ - 智能法律服务系统 - + 智能法律顾问系统 +