diff --git a/other/06_智能法律顾问系统_软件开发项目的个人自评报告.xlsx b/other/06_智能法律顾问系统_软件开发项目的个人自评报告.xlsx index 5e58b4a..7f045d1 100644 Binary files a/other/06_智能法律顾问系统_软件开发项目的个人自评报告.xlsx and b/other/06_智能法律顾问系统_软件开发项目的个人自评报告.xlsx differ diff --git a/other/07_智能法律顾问系统_软件开发项目的团队自评报告.xlsx b/other/07_智能法律顾问系统_软件开发项目的团队自评报告.xlsx index 6a0b3f2..1003805 100644 Binary files a/other/07_智能法律顾问系统_软件开发项目的团队自评报告.xlsx and b/other/07_智能法律顾问系统_软件开发项目的团队自评报告.xlsx differ diff --git a/src/智能法律顾问/css/styles1.css b/src/智能法律顾问/css/styles1.css new file mode 100644 index 0000000..cc4e76d --- /dev/null +++ b/src/智能法律顾问/css/styles1.css @@ -0,0 +1,682 @@ +/* 基本重置 */ +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; + } + + +/**/ +.result-box { + background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */ + border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */ + padding: 20px; + margin-top: 20px; + border-radius: 5px; /* 圆角边框 */ + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */ + animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */ +} + +/* 结果文本框样式 */ +.result-textarea { + background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */ + border: 1px solid #ddd; /* 边框颜色与输入框一致 */ + border-radius: 5px; /* 圆角边框 */ + padding: 10px; + width: 100%; /* 宽度与输入框一致 */ + box-sizing: border-box; /* 盒模型宽度包含padding和border */ + resize: none; /* 禁止调整大小 */ + font-family: 'Arial', sans-serif; /* 与页面字体一致 */ + color: #333; /* 文本颜色与页面一致 */ + line-height: 1.5; /* 行高 */ + overflow-y: auto; /* 超出内容显示滚动条 */ +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .result-box { + width: auto; /* 小屏幕上宽度自动调整 */ + margin-left: 10px; /* 较小的外边距 */ + margin-right: 10px; + } + input[type="text"] { + width: calc(100% - 22px); /* 调整输入框宽度 */ + } +} + +/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */ +.result-box:hover { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); +} + +/* 点击效果，使结果框在被点击时有压缩效果 */ +.result-box:active { + transform: translateY(2px); +} +/* 显示动画 */ +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 隐藏动画 */ +@keyframes fadeOutUp { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-20px); + } +} + +/* 展开动画 */ +@keyframes expand { + from { + height: 0; + } + to { + height: 200px; /* 根据需要调整高度 */ + } +} +.result-box { + display: none; /* 初始时隐藏 */ + background-color: #f8d7da; + border: 1px solid #d9534f; + padding: 20px; + margin-top: 20px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + animation-fill-mode: forwards; /* 保持动画结束状态 */ + overflow: hidden; /* 隐藏内容超出部分 */ +} + + +.result-box:active { + animation: ripple 0.5s forwards; + } + + @keyframes gradientBG { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } + } + .result-box { + background-size: 200% 200%; + animation: gradientBG 5s ease infinite; + } + + + @keyframes textBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-5px); } + } + .result-textarea:hover { + animation: textBounce 0.5s infinite; + } + @keyframes borderBounce { + 0%, 100% { border: 1px solid #d9534f; } + 50% { border: 2px solid #ff6e7a; } + } + .result-box:hover { + animation: borderBounce 1s infinite; + } + @keyframes backgroundBlink { + 0%, 100% { background-color: #ff6e7a; } + 50% { background-color: #d9534f; } + } + .result-box:hover { + animation: backgroundBlink 1s infinite; + } + + @keyframes typewriter { + 0% { width: 0; } + 100% { width: 100%; } + } + .result-textarea { + animation: typewriter 3s steps(30, end) forwards; + } + + .result-box { + background-image: linear-gradient(135deg, #ff6e7a, #d9534f); + } + .result-textarea { + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); + } + + .result-box, .result-textarea { + transition: all 0.3s ease; + } + + .result-box:hover { + background-image: linear-gradient(135deg, #ff7e8a, #e95a5f); + } + + .result-box:active { + transform: scale(0.98); + } + @keyframes textGlow { + 0%, 100% { color: #333; } + 50% { color: #555; } + } + .result-textarea { + animation: textGlow 2s infinite; + } + .result-box { + position: relative; + overflow: hidden; + } + .result-box::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.2); + z-index: 1; + opacity: 0; + transition: opacity 0.3s ease; + } + .result-box:hover::before { + animation: ripple 1.5s infinite; + } + @keyframes ripple { + 0% { + transform: scale(0); + opacity: 1; + } + 100% { + transform: scale(1.5); + opacity: 0; + } + } + @keyframes bounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-10px); } + } + .result-box { + animation: bounce 2s infinite ease-in-out; + } + @keyframes shadowSpread { + 0%, 100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } + 50% { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); } + } + .result-box:hover { + animation: shadowSpread 2s infinite; + } \ No newline at end of file diff --git a/src/智能法律顾问/css/styles2.css b/src/智能法律顾问/css/styles2.css new file mode 100644 index 0000000..d62b981 --- /dev/null +++ b/src/智能法律顾问/css/styles2.css @@ -0,0 +1,568 @@ +/* 基本重置 */ +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; + } + + + /* 术语 */ +/* 术语结果框样式 */ +.result-box { + background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */ + border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */ + padding: 20px; + margin-top: 20px; + border-radius: 5px; /* 圆角边框 */ + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */ + animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */ +} + +/* 结果文本框样式 */ +.result-textarea { + background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */ + border: 1px solid #ddd; /* 边框颜色与输入框一致 */ + border-radius: 5px; /* 圆角边框 */ + padding: 10px; + width: 100%; /* 宽度与输入框一致 */ + box-sizing: border-box; /* 盒模型宽度包含padding和border */ + resize: none; /* 禁止调整大小 */ + font-family: 'Arial', sans-serif; /* 与页面字体一致 */ + color: #333; /* 文本颜色与页面一致 */ + line-height: 1.5; /* 行高 */ + overflow-y: auto; /* 超出内容显示滚动条 */ +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .result-box { + width: auto; /* 小屏幕上宽度自动调整 */ + margin-left: 10px; /* 较小的外边距 */ + margin-right: 10px; + } + input[type="text"] { + width: calc(100% - 22px); /* 调整输入框宽度 */ + } +} + +/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */ +.result-box:hover { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); +} + +/* 点击效果，使结果框在被点击时有压缩效果 */ +.result-box:active { + transform: translateY(2px); +} +/* 显示动画 */ +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 隐藏动画 */ +@keyframes fadeOutUp { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-20px); + } +} + +/* 展开动画 */ +@keyframes expand { + from { + height: 0; + } + to { + height: 200px; /* 根据需要调整高度 */ + } +} +.result-box { + display: none; /* 初始时隐藏 */ + background-color: #f8d7da; + border: 1px solid #d9534f; + padding: 20px; + margin-top: 20px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + animation-fill-mode: forwards; /* 保持动画结束状态 */ + overflow: hidden; /* 隐藏内容超出部分 */ +} \ No newline at end of file diff --git a/src/智能法律顾问/css/styles3.css b/src/智能法律顾问/css/styles3.css new file mode 100644 index 0000000..d62b981 --- /dev/null +++ b/src/智能法律顾问/css/styles3.css @@ -0,0 +1,568 @@ +/* 基本重置 */ +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; + } + + + /* 术语 */ +/* 术语结果框样式 */ +.result-box { + background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */ + border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */ + padding: 20px; + margin-top: 20px; + border-radius: 5px; /* 圆角边框 */ + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */ + animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */ +} + +/* 结果文本框样式 */ +.result-textarea { + background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */ + border: 1px solid #ddd; /* 边框颜色与输入框一致 */ + border-radius: 5px; /* 圆角边框 */ + padding: 10px; + width: 100%; /* 宽度与输入框一致 */ + box-sizing: border-box; /* 盒模型宽度包含padding和border */ + resize: none; /* 禁止调整大小 */ + font-family: 'Arial', sans-serif; /* 与页面字体一致 */ + color: #333; /* 文本颜色与页面一致 */ + line-height: 1.5; /* 行高 */ + overflow-y: auto; /* 超出内容显示滚动条 */ +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .result-box { + width: auto; /* 小屏幕上宽度自动调整 */ + margin-left: 10px; /* 较小的外边距 */ + margin-right: 10px; + } + input[type="text"] { + width: calc(100% - 22px); /* 调整输入框宽度 */ + } +} + +/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */ +.result-box:hover { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); +} + +/* 点击效果，使结果框在被点击时有压缩效果 */ +.result-box:active { + transform: translateY(2px); +} +/* 显示动画 */ +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 隐藏动画 */ +@keyframes fadeOutUp { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-20px); + } +} + +/* 展开动画 */ +@keyframes expand { + from { + height: 0; + } + to { + height: 200px; /* 根据需要调整高度 */ + } +} +.result-box { + display: none; /* 初始时隐藏 */ + background-color: #f8d7da; + border: 1px solid #d9534f; + padding: 20px; + margin-top: 20px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + animation-fill-mode: forwards; /* 保持动画结束状态 */ + overflow: hidden; /* 隐藏内容超出部分 */ +} \ No newline at end of file diff --git a/src/智能法律顾问/css/styles4.css b/src/智能法律顾问/css/styles4.css new file mode 100644 index 0000000..d62b981 --- /dev/null +++ b/src/智能法律顾问/css/styles4.css @@ -0,0 +1,568 @@ +/* 基本重置 */ +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; + } + + + /* 术语 */ +/* 术语结果框样式 */ +.result-box { + background-color: #ff6e7a; /* 淡红色背景，与按钮颜色呼应 */ + border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */ + padding: 20px; + margin-top: 20px; + border-radius: 5px; /* 圆角边框 */ + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 轻微的立体阴影效果 */ + animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */ +} + +/* 结果文本框样式 */ +.result-textarea { + background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */ + border: 1px solid #ddd; /* 边框颜色与输入框一致 */ + border-radius: 5px; /* 圆角边框 */ + padding: 10px; + width: 100%; /* 宽度与输入框一致 */ + box-sizing: border-box; /* 盒模型宽度包含padding和border */ + resize: none; /* 禁止调整大小 */ + font-family: 'Arial', sans-serif; /* 与页面字体一致 */ + color: #333; /* 文本颜色与页面一致 */ + line-height: 1.5; /* 行高 */ + overflow-y: auto; /* 超出内容显示滚动条 */ +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .result-box { + width: auto; /* 小屏幕上宽度自动调整 */ + margin-left: 10px; /* 较小的外边距 */ + margin-right: 10px; + } + input[type="text"] { + width: calc(100% - 22px); /* 调整输入框宽度 */ + } +} + +/* 悬停效果，使结果框在鼠标悬停时有阴影变化 */ +.result-box:hover { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); +} + +/* 点击效果，使结果框在被点击时有压缩效果 */ +.result-box:active { + transform: translateY(2px); +} +/* 显示动画 */ +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 隐藏动画 */ +@keyframes fadeOutUp { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-20px); + } +} + +/* 展开动画 */ +@keyframes expand { + from { + height: 0; + } + to { + height: 200px; /* 根据需要调整高度 */ + } +} +.result-box { + display: none; /* 初始时隐藏 */ + background-color: #f8d7da; + border: 1px solid #d9534f; + padding: 20px; + margin-top: 20px; + border-radius: 5px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); + animation-fill-mode: forwards; /* 保持动画结束状态 */ + overflow: hidden; /* 隐藏内容超出部分 */ +} \ No newline at end of file diff --git a/src/智能法律顾问/css/styles5.css b/src/智能法律顾问/css/styles5.css new file mode 100644 index 0000000..e81f7d4 --- /dev/null +++ b/src/智能法律顾问/css/styles5.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: rgb(255, 255, 255); + 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/智能法律顾问/vue/App.vue b/src/智能法律顾问/vue/App.vue new file mode 100644 index 0000000..739ba53 --- /dev/null +++ b/src/智能法律顾问/vue/App.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/智能法律顾问/vue/Login.vue b/src/智能法律顾问/vue/Login.vue new file mode 100644 index 0000000..cc3e1ec --- /dev/null +++ b/src/智能法律顾问/vue/Login.vue @@ -0,0 +1,837 @@ + + + + + + + \ No newline at end of file diff --git a/src/智能法律顾问/vue/assets/logo.png b/src/智能法律顾问/vue/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/智能法律顾问/vue/assets/logo.png differ diff --git a/src/智能法律顾问/vue/components/Home.vue b/src/智能法律顾问/vue/components/Home.vue new file mode 100644 index 0000000..1db9205 --- /dev/null +++ b/src/智能法律顾问/vue/components/Home.vue @@ -0,0 +1,59 @@ + + + + diff --git a/src/智能法律顾问/vue/components/background/Background.vue b/src/智能法律顾问/vue/components/background/Background.vue new file mode 100644 index 0000000..e1f96f6 --- /dev/null +++ b/src/智能法律顾问/vue/components/background/Background.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/background/BackgroundColor.vue b/src/智能法律顾问/vue/components/background/BackgroundColor.vue new file mode 100644 index 0000000..c2f8534 --- /dev/null +++ b/src/智能法律顾问/vue/components/background/BackgroundColor.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/bar/Bar.vue b/src/智能法律顾问/vue/components/bar/Bar.vue new file mode 100644 index 0000000..159500c --- /dev/null +++ b/src/智能法律顾问/vue/components/bar/Bar.vue @@ -0,0 +1,63 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/carousel/Carousel.vue b/src/智能法律顾问/vue/components/carousel/Carousel.vue new file mode 100644 index 0000000..4a8d138 --- /dev/null +++ b/src/智能法律顾问/vue/components/carousel/Carousel.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/AskCard.vue b/src/智能法律顾问/vue/components/main/AskCard.vue new file mode 100644 index 0000000..80fc55f --- /dev/null +++ b/src/智能法律顾问/vue/components/main/AskCard.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/AskList.vue b/src/智能法律顾问/vue/components/main/AskList.vue new file mode 100644 index 0000000..cbfc063 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/AskList.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/Navigation.vue b/src/智能法律顾问/vue/components/main/Navigation.vue new file mode 100644 index 0000000..571601d --- /dev/null +++ b/src/智能法律顾问/vue/components/main/Navigation.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/NavigatorButton.vue b/src/智能法律顾问/vue/components/main/NavigatorButton.vue new file mode 100644 index 0000000..3d96dcc --- /dev/null +++ b/src/智能法律顾问/vue/components/main/NavigatorButton.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/ask/AskDetail.vue b/src/智能法律顾问/vue/components/main/ask/AskDetail.vue new file mode 100644 index 0000000..39c0de1 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/ask/AskDetail.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/ask/AskHome.vue b/src/智能法律顾问/vue/components/main/ask/AskHome.vue new file mode 100644 index 0000000..6695cc2 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/ask/AskHome.vue @@ -0,0 +1,226 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/infer/InferDetail.vue b/src/智能法律顾问/vue/components/main/infer/InferDetail.vue new file mode 100644 index 0000000..be62335 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/infer/InferDetail.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/infer/InferHome.vue b/src/智能法律顾问/vue/components/main/infer/InferHome.vue new file mode 100644 index 0000000..0d3d080 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/infer/InferHome.vue @@ -0,0 +1,224 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/legal/LegalDetail.vue b/src/智能法律顾问/vue/components/main/legal/LegalDetail.vue new file mode 100644 index 0000000..bc2f014 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/legal/LegalDetail.vue @@ -0,0 +1,13 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/legal/LegalHome.vue b/src/智能法律顾问/vue/components/main/legal/LegalHome.vue new file mode 100644 index 0000000..258d73c --- /dev/null +++ b/src/智能法律顾问/vue/components/main/legal/LegalHome.vue @@ -0,0 +1,211 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/main/legal/LegalHomeUpLoadFile.vue b/src/智能法律顾问/vue/components/main/legal/LegalHomeUpLoadFile.vue new file mode 100644 index 0000000..54d6773 --- /dev/null +++ b/src/智能法律顾问/vue/components/main/legal/LegalHomeUpLoadFile.vue @@ -0,0 +1,207 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/utils/HomeCard.vue b/src/智能法律顾问/vue/components/utils/HomeCard.vue new file mode 100644 index 0000000..c4e7bf9 --- /dev/null +++ b/src/智能法律顾问/vue/components/utils/HomeCard.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/utils/SearchBar.vue b/src/智能法律顾问/vue/components/utils/SearchBar.vue new file mode 100644 index 0000000..48408c4 --- /dev/null +++ b/src/智能法律顾问/vue/components/utils/SearchBar.vue @@ -0,0 +1,288 @@ + + + + + diff --git a/src/智能法律顾问/vue/components/utils/Upload.vue b/src/智能法律顾问/vue/components/utils/Upload.vue new file mode 100644 index 0000000..6f47d7f --- /dev/null +++ b/src/智能法律顾问/vue/components/utils/Upload.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/src/智能法律顾问/vue/index.vue b/src/智能法律顾问/vue/index.vue new file mode 100644 index 0000000..7918ebe --- /dev/null +++ b/src/智能法律顾问/vue/index.vue @@ -0,0 +1,742 @@ + + + + + \ No newline at end of file diff --git a/src/智能法律顾问/vue/main.js b/src/智能法律顾问/vue/main.js new file mode 100644 index 0000000..f90b8d9 --- /dev/null +++ b/src/智能法律顾问/vue/main.js @@ -0,0 +1,17 @@ +import Vue from 'vue' +import App from './App.vue' +import router from "@/router"; +import store from "@/store"; +import './registerServiceWorker' +import Axios from "axios"; +import VueAxios from "vue-axios"; + +Vue.use(VueAxios, Axios); + +Vue.config.productionTip = false; + +new Vue({ + router, + store, + render: h => h(App), +}).$mount('#app'); diff --git a/src/智能法律顾问/vue/registerServiceWorker.js b/src/智能法律顾问/vue/registerServiceWorker.js new file mode 100644 index 0000000..76cede0 --- /dev/null +++ b/src/智能法律顾问/vue/registerServiceWorker.js @@ -0,0 +1,32 @@ +/* eslint-disable no-console */ + +import { register } from 'register-service-worker' + +if (process.env.NODE_ENV === 'production') { + register(`${process.env.BASE_URL}service-worker.js`, { + ready () { + console.log( + 'App is being served from cache by a service worker.\n' + + 'For more details, visit https://goo.gl/AFskqB' + ) + }, + registered () { + console.log('Service worker has been registered.') + }, + cached () { + console.log('Content has been cached for offline use.') + }, + updatefound () { + console.log('New content is downloading.') + }, + updated () { + console.log('New content is available; please refresh.') + }, + offline () { + console.log('No internet connection found. App is running in offline mode.') + }, + error (error) { + console.error('Error during service worker registration:', error) + } + }) +} diff --git a/src/智能法律顾问/vue/router.js b/src/智能法律顾问/vue/router.js new file mode 100644 index 0000000..f9904ed --- /dev/null +++ b/src/智能法律顾问/vue/router.js @@ -0,0 +1,19 @@ +import Vue from 'vue' +import Router from 'vue-router' +import Home from "@/components/Home"; + +Vue.use(Router); + +export default new Router({ + mode: 'history', + base: process.env.BABEL_URL, + routes: [ + { + path: '/', + name: 'home', + components: { + default: Home, + } + } + ] +}) diff --git a/src/智能法律顾问/vue/store.js b/src/智能法律顾问/vue/store.js new file mode 100644 index 0000000..fcb375b --- /dev/null +++ b/src/智能法律顾问/vue/store.js @@ -0,0 +1,58 @@ +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex); + +export default new Vuex.Store({ + state: { + setting: { + color: ['#ff6262', '#ffa947'], + }, + settingOption: { + colors: [{ + name: '炽焰', + color: ['#ff6262', '#ffa947'], + },{ + name: '冰蓝', + color: ['#5b9df9', '#47bfff'], + },{ + name: '青草', + color: ['#2c7d59', '#3ba776'], + },{ + name: '江户', + color: ['#8E2DE2', '#4A00E0'], + }] + }, + askList: [], + onAsk: false, + onInfer: false, + onLegal: false, + currentTab: 'Home', + selected: null, + unselect: null, + cardSelected: null, + cardUnselect: null, + }, + mutations: { + selectTab (state, selected) { + state.unselect = null; + state.selected = selected; + }, + setTab (state, tab) { + state.currentTab = tab; + }, + unselectTab (state) { + state.unselect = state.selected; + state.selected = null; + state.currentTab = 'Home'; + }, + selectCard (state, selected) { + state.cardUnselect = null; + state.cardSelected = selected; + }, + unselectCard (state) { + state.cardUnselect = state.cardSelected; + state.cardSelected = null; + } + } +})