parent
db7628b42e
commit
7b934f3527
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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; /* 隐藏内容超出部分 */
|
||||
}
|
||||
@ -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; /* 隐藏内容超出部分 */
|
||||
}
|
||||
@ -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; /* 隐藏内容超出部分 */
|
||||
}
|
||||
@ -0,0 +1,576 @@
|
||||
/* 基本重置 */
|
||||
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: linear-gradient(135deg, #ff6e7a, #ff9a8b); /* 渐变背景色 */
|
||||
border: 1px solid #d9534f; /* 边框颜色与头部和底部颜色一致 */
|
||||
padding: 30px;
|
||||
margin-top: 40px;
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); /* 增强的阴影效果 */
|
||||
animation: fadeInDown 1s ease-in-out; /* 淡入下移动画 */
|
||||
transition: box-shadow 0.3s ease, padding 0.3s ease; /* 平滑的阴影和内边距变化 */
|
||||
opacity: 0; /* 初始时透明度为0 */
|
||||
display: inline-block; /* 根据内容变化 */
|
||||
max-width: 400%; /* 限制最大宽度 */
|
||||
}
|
||||
|
||||
.result-textarea {
|
||||
background-color: #f5f5f5; /* 浅灰色背景，更好的对比度 */
|
||||
border: 1px solid #ddd; /* 边框颜色与输入框一致 */
|
||||
border-radius: 5px; /* 圆角边框 */
|
||||
padding: 10px;
|
||||
width: 100%; /* 仍然保持为100%，适应父元素 */
|
||||
box-sizing: border-box; /* 盒模型宽度包含padding和border */
|
||||
resize: none; /* 禁止调整大小 */
|
||||
font-family: 'Arial', sans-serif; /* 与页面字体一致 */
|
||||
color: #333; /* 文本颜色与页面一致 */
|
||||
line-height: 2; /* 行高 */
|
||||
transition: background-color 0.3s ease; /* 背景颜色变化 */
|
||||
}
|
||||
|
||||
|
||||
.result-textarea:focus {
|
||||
background-color: #e0e0e0; /* 输入框获得焦点时背景颜色变化 */
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@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 25px rgba(0, 0, 0, 0.3); /* 增强的悬停阴影 */
|
||||
}
|
||||
|
||||
/* 点击效果，使结果框在被点击时有压缩效果 */
|
||||
.result-box:active {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
/* 显示动画 */
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏动画 */
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-40px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏初始状态 */
|
||||
.hidden {
|
||||
display: none; /* 初始时隐藏 */
|
||||
}
|
||||
|
||||
/* 新增动画效果 */
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,291 @@
|
||||
function consultationFunction() {
|
||||
var userInput = document.getElementById('consultation-input').value;
|
||||
alert("您咨询的问题是: " + userInput);
|
||||
// 这里可以添加更多的逻辑来处理用户的咨询
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const createSparkle = (x, y) => {
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.classList.add('sparkle-point');
|
||||
sparkle.style.left = `${x}px`;
|
||||
sparkle.style.top = `${y}px`;
|
||||
document.body.appendChild(sparkle);
|
||||
|
||||
// Remove sparkle after animation
|
||||
setTimeout(() => {
|
||||
sparkle.remove();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// Create random sparkles
|
||||
setInterval(() => {
|
||||
const x = Math.random() * window.innerWidth;
|
||||
const y = Math.random() * window.innerHeight;
|
||||
createSparkle(x, y);
|
||||
}, 500);
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const createSparkle = (x, y) => {
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.classList.add('sparkle-point');
|
||||
sparkle.style.left = `${x}px`;
|
||||
sparkle.style.top = `${y}px`;
|
||||
document.body.appendChild(sparkle);
|
||||
|
||||
// Remove sparkle after animation
|
||||
setTimeout(() => {
|
||||
sparkle.remove();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// Create random sparkles
|
||||
setInterval(() => {
|
||||
const x = Math.random() * window.innerWidth;
|
||||
const y = Math.random() * window.innerHeight;
|
||||
createSparkle(x, y);
|
||||
}, 500);
|
||||
});
|
||||
particlesJS.load('particles-js', 'path_to_particles_config_json.json', function() {
|
||||
console.log('particles.js loaded - callback');
|
||||
});
|
||||
function create3DBackground() {
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
scene.add(cube);
|
||||
|
||||
camera.position.z = 5;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
cube.rotation.x += 0.01;
|
||||
cube.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
create3DBackground();
|
||||
function initParticles() {
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const particles = new THREE.Geometry();
|
||||
const pMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 5 });
|
||||
|
||||
for (let i = 0; i < 200; i++) {
|
||||
const particle = new THREE.Vector3(
|
||||
Math.random() * 2000 - 1000,
|
||||
Math.random() * 2000 - 1000,
|
||||
Math.random() * 2000 - 1000
|
||||
);
|
||||
particles.vertices.push(particle);
|
||||
}
|
||||
|
||||
const particleSystem = new THREE.Points(particles, pMaterial);
|
||||
scene.add(particleSystem);
|
||||
|
||||
camera.position.z = 500;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
particleSystem.rotation.x += 0.01;
|
||||
particleSystem.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
initParticles();
|
||||
|
||||
function createFloatingCircles() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const circle = document.createElement('div');
|
||||
circle.className = 'floating-circle';
|
||||
circle.style.width = `${Math.random() * 50 + 10}px`;
|
||||
circle.style.height = circle.style.width;
|
||||
circle.style.left = `${Math.random() * window.innerWidth}px`;
|
||||
circle.style.top = `${Math.random() * window.innerHeight}px`;
|
||||
document.body.appendChild(circle);
|
||||
}
|
||||
}
|
||||
createFloatingCircles();
|
||||
// JavaScript代码
|
||||
const canvas = document.getElementById('particleCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const particles = [];
|
||||
const numberOfParticles = 100;
|
||||
|
||||
for (let i = 0; i < numberOfParticles; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
particles.forEach(particle => {
|
||||
particle.move();
|
||||
particle.draw(ctx);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
particles.forEach(particle => {
|
||||
particle.attract(event.x, event.y);
|
||||
});
|
||||
});
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.radius = Math.random() * 3 + 1;
|
||||
this.alpha = 1;
|
||||
this.velocity = {
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2
|
||||
};
|
||||
}
|
||||
|
||||
move() {
|
||||
this.x += this.velocity.x;
|
||||
this.y += this.velocity.y;
|
||||
this.alpha -= 0.0001;
|
||||
|
||||
if (this.alpha <= 0) {
|
||||
this.radius = Math.random() * 3 + 1;
|
||||
this.alpha = 1;
|
||||
this.velocity = {
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
attract(x, y) {
|
||||
const dx = x - this.x;
|
||||
const dy = y - this.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const force = (5 * this.radius) / distance;
|
||||
|
||||
this.velocity.x += force * (dx / distance);
|
||||
this.velocity.y += force * (dy / distance);
|
||||
}
|
||||
|
||||
draw(ctx) {
|
||||
ctx.beginPath;
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
|
||||
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
var shaderMaterial = new THREE.ShaderMaterial({
|
||||
vertexShader: document.getElementById('vertexShader').textContent,
|
||||
fragmentShader: document.getElementById('fragmentShader').textContent
|
||||
});
|
||||
|
||||
var mesh = new THREE.Mesh(geometry, shaderMaterial);
|
||||
scene.add(mesh);
|
||||
|
||||
|
||||
function consultationFunction() {
|
||||
var searchTerm = document.getElementById('consultation-input').value.toLowerCase();
|
||||
var resultBox = document.getElementById('result-box');
|
||||
var resultTextarea = document.getElementById('result-textarea');
|
||||
|
||||
// 清空文本框内容
|
||||
resultTextarea.value = '';
|
||||
|
||||
fetch('./json/legalAdvice.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
var foundAnswer = null;
|
||||
var closestMatch = null;
|
||||
var closestDistance = Infinity;
|
||||
|
||||
// 使用正则表达式分词，保留字母和数字
|
||||
var searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
|
||||
|
||||
data.forEach(item => {
|
||||
var question = item.question.toLowerCase();
|
||||
// 计算匹配
|
||||
var isMatch = searchWords.every(word => question.includes(word));
|
||||
|
||||
// 如果找到完全匹配
|
||||
if (isMatch) {
|
||||
foundAnswer = item.answers[0]; // 假设只取第一个答案
|
||||
} else {
|
||||
// 计算相似度
|
||||
var distance = getLevenshteinDistance(searchTerm, item.question);
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestMatch = item; // 保存最接近的匹配
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 如果找到匹配的答案，显示在文本框中
|
||||
if (foundAnswer) {
|
||||
resultTextarea.value = foundAnswer;
|
||||
resultBox.style.display = 'block'; // 显示结果框
|
||||
} else if (closestMatch) {
|
||||
resultTextarea.value = `${closestMatch.answers[0]}`;
|
||||
resultBox.style.display = 'block'; // 显示结果框
|
||||
} else {
|
||||
resultTextarea.value = '未找到相关的法律建议。';
|
||||
resultBox.style.display = 'block'; // 显示结果框
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching legal advice:', error);
|
||||
resultTextarea.value = '获取法律建议时出错，请稍后再试。';
|
||||
resultBox.style.display = 'block'; // 显示结果框
|
||||
});
|
||||
}
|
||||
|
||||
// 计算Levenshtein距离
|
||||
function getLevenshteinDistance(a, b) {
|
||||
const matrix = [];
|
||||
|
||||
// 初始化矩阵
|
||||
for (let i = 0; i <= b.length; i++) {
|
||||
matrix[i] = [i];
|
||||
}
|
||||
for (let j = 0; j <= a.length; j++) {
|
||||
matrix[0][j] = j;
|
||||
}
|
||||
|
||||
// 填充矩阵
|
||||
for (let i = 1; i <= b.length; i++) {
|
||||
for (let j = 1; j <= a.length; j++) {
|
||||
if (b.charAt(i - 1) === a.charAt(j - 1)) {
|
||||
matrix[i][j] = matrix[i - 1][j - 1];
|
||||
} else {
|
||||
matrix[i][j] = Math.min(
|
||||
matrix[i - 1][j - 1] + 1, // substitution
|
||||
Math.min(matrix[i][j - 1] + 1, // insertion
|
||||
matrix[i - 1][j] + 1) // deletion
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return matrix[b.length][a.length];
|
||||
}
|
||||
@ -0,0 +1,313 @@
|
||||
function consultationFunction() {
|
||||
var userInput = document.getElementById('consultation-input').value;
|
||||
alert("您咨询的问题是: " + userInput);
|
||||
// 这里可以添加更多的逻辑来处理用户的咨询
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const createSparkle = (x, y) => {
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.classList.add('sparkle-point');
|
||||
sparkle.style.left = `${x}px`;
|
||||
sparkle.style.top = `${y}px`;
|
||||
document.body.appendChild(sparkle);
|
||||
|
||||
// Remove sparkle after animation
|
||||
setTimeout(() => {
|
||||
sparkle.remove();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// Create random sparkles
|
||||
setInterval(() => {
|
||||
const x = Math.random() * window.innerWidth;
|
||||
const y = Math.random() * window.innerHeight;
|
||||
createSparkle(x, y);
|
||||
}, 500);
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const createSparkle = (x, y) => {
|
||||
const sparkle = document.createElement('div');
|
||||
sparkle.classList.add('sparkle-point');
|
||||
sparkle.style.left = `${x}px`;
|
||||
sparkle.style.top = `${y}px`;
|
||||
document.body.appendChild(sparkle);
|
||||
|
||||
// Remove sparkle after animation
|
||||
setTimeout(() => {
|
||||
sparkle.remove();
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
// Create random sparkles
|
||||
setInterval(() => {
|
||||
const x = Math.random() * window.innerWidth;
|
||||
const y = Math.random() * window.innerHeight;
|
||||
createSparkle(x, y);
|
||||
}, 500);
|
||||
});
|
||||
particlesJS.load('particles-js', 'path_to_particles_config_json.json', function() {
|
||||
console.log('particles.js loaded - callback');
|
||||
});
|
||||
function create3DBackground() {
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
scene.add(cube);
|
||||
|
||||
camera.position.z = 5;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
cube.rotation.x += 0.01;
|
||||
cube.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
create3DBackground();
|
||||
function initParticles() {
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
const particles = new THREE.Geometry();
|
||||
const pMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 5 });
|
||||
|
||||
for (let i = 0; i < 200; i++) {
|
||||
const particle = new THREE.Vector3(
|
||||
Math.random() * 2000 - 1000,
|
||||
Math.random() * 2000 - 1000,
|
||||
Math.random() * 2000 - 1000
|
||||
);
|
||||
particles.vertices.push(particle);
|
||||
}
|
||||
|
||||
const particleSystem = new THREE.Points(particles, pMaterial);
|
||||
scene.add(particleSystem);
|
||||
|
||||
camera.position.z = 500;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
particleSystem.rotation.x += 0.01;
|
||||
particleSystem.rotation.y += 0.01;
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
animate();
|
||||
}
|
||||
|
||||
initParticles();
|
||||
|
||||
function createFloatingCircles() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const circle = document.createElement('div');
|
||||
circle.className = 'floating-circle';
|
||||
circle.style.width = `${Math.random() * 50 + 10}px`;
|
||||
circle.style.height = circle.style.width;
|
||||
circle.style.left = `${Math.random() * window.innerWidth}px`;
|
||||
circle.style.top = `${Math.random() * window.innerHeight}px`;
|
||||
document.body.appendChild(circle);
|
||||
}
|
||||
}
|
||||
createFloatingCircles();
|
||||
// JavaScript代码
|
||||
const canvas = document.getElementById('particleCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const particles = [];
|
||||
const numberOfParticles = 100;
|
||||
|
||||
for (let i = 0; i < numberOfParticles; i++) {
|
||||
particles.push(new Particle());
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
particles.forEach(particle => {
|
||||
particle.move();
|
||||
particle.draw(ctx);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', (event) => {
|
||||
particles.forEach(particle => {
|
||||
particle.attract(event.x, event.y);
|
||||
});
|
||||
});
|
||||
|
||||
class Particle {
|
||||
constructor() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.radius = Math.random() * 3 + 1;
|
||||
this.alpha = 1;
|
||||
this.velocity = {
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2
|
||||
};
|
||||
}
|
||||
|
||||
move() {
|
||||
this.x += this.velocity.x;
|
||||
this.y += this.velocity.y;
|
||||
this.alpha -= 0.0001;
|
||||
|
||||
if (this.alpha <= 0) {
|
||||
this.radius = Math.random() * 3 + 1;
|
||||
this.alpha = 1;
|
||||
this.velocity = {
|
||||
x: (Math.random() - 0.5) * 2,
|
||||
y: (Math.random() - 0.5) * 2
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
attract(x, y) {
|
||||
const dx = x - this.x;
|
||||
const dy = y - this.y;
|
||||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||
const force = (5 * this.radius) / distance;
|
||||
|
||||
this.velocity.x += force * (dx / distance);
|
||||
this.velocity.y += force * (dy / distance);
|
||||
}
|
||||
|
||||
draw(ctx) {
|
||||
ctx.beginPath;
|
||||
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
|
||||
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
animate();
|
||||
var shaderMaterial = new THREE.ShaderMaterial({
|
||||
vertexShader: document.getElementById('vertexShader').textContent,
|
||||
fragmentShader: document.getElementById('fragmentShader').textContent
|
||||
});
|
||||
|
||||
var mesh = new THREE.Mesh(geometry, shaderMaterial);
|
||||
scene.add(mesh);
|
||||
|
||||
/* 法律术语 */
|
||||
// script.js
|
||||
function consultationFunction() {
|
||||
var searchTerm = document.getElementById('consultation-input').value.toLowerCase();
|
||||
var resultBox = document.getElementById('result-box');
|
||||
var resultTextarea = document.getElementById('result-textarea');
|
||||
|
||||
fetch('./json/legalTerms.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const termData = data.find(term => term.term.toLowerCase() === searchTerm);
|
||||
if (termData) {
|
||||
// 显示结果框并设置内容
|
||||
resultTextarea.value = `${termData.term}: ${termData.definition}`;
|
||||
showResultBox(resultBox);
|
||||
} else {
|
||||
// 计算相似度并找到最接近的5个术语
|
||||
const similarTerms = findSimilarTerms(data, searchTerm, 5);
|
||||
if (similarTerms.length > 0) {
|
||||
let message = '未找到完全匹配的术语，但以下是最接近的术语：\n';
|
||||
similarTerms.forEach(term => {
|
||||
message += `${term.term}: ${term.definition}\n`;
|
||||
});
|
||||
resultTextarea.value = message;
|
||||
} else {
|
||||
resultTextarea.value = '未找到相关术语。';
|
||||
}
|
||||
showResultBox(resultBox);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
resultTextarea.value = '请求失败，请稍后再试。';
|
||||
showResultBox(resultBox);
|
||||
});
|
||||
}
|
||||
|
||||
// Levenshtein距离算法实现
|
||||
function levenshteinDistance(a, b) {
|
||||
let i, j, matrix = [];
|
||||
let cost;
|
||||
|
||||
if (a.length === 0) return b.length;
|
||||
if (b.length === 0) return a.length;
|
||||
|
||||
for (i = 0; i <= b.length; i++) matrix[i] = [i];
|
||||
for (j = 0; j <= a.length; j++) matrix[0][j] = j;
|
||||
|
||||
for (i = 1; i <= b.length; i++) {
|
||||
for (j = 1; j <= a.length; j++) {
|
||||
cost = (a[j - 1] === b[i - 1]) ? 0 : 1;
|
||||
matrix[i][j] = Math.min(
|
||||
matrix[i - 1][j] + 1, // deletion
|
||||
matrix[i][j - 1] + 1, // insertion
|
||||
matrix[i - 1][j - 1] + cost // substitution
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return matrix[b.length][a.length];
|
||||
}
|
||||
|
||||
// 找到最接近的5个术语
|
||||
function findSimilarTerms(data, searchTerm, limit) {
|
||||
return data
|
||||
.map(term => ({
|
||||
term: term.term,
|
||||
definition: term.definition,
|
||||
distance: levenshteinDistance(searchTerm, term.term)
|
||||
}))
|
||||
.sort((a, b) => a.distance - b.distance)
|
||||
.slice(0, limit);
|
||||
}
|
||||
|
||||
// 显示结果框的函数
|
||||
function showResultBox(box) {
|
||||
box.style.display = 'block';
|
||||
box.style.animation = 'fadeInDown 1s ease-in-out, scaleUp 0.5s ease-in-out';
|
||||
box.style.overflow = 'visible'; // 允许内容溢出
|
||||
box.style.height = 'auto'; // 自适应高度
|
||||
}
|
||||
|
||||
// 显示结果框的函数
|
||||
function showResultBox(box) {
|
||||
// 首先确保结果框是可见的
|
||||
box.style.display = 'block';
|
||||
box.style.opacity = '1';
|
||||
|
||||
// 获取结果框内部内容的高度
|
||||
var content = box.querySelector('.result-textarea');
|
||||
var contentHeight = content.scrollHeight;
|
||||
|
||||
// 设置结果框的最大高度为内容的高度
|
||||
box.style.maxHeight = contentHeight + 'px';
|
||||
box.style.padding = '20px';
|
||||
}
|
||||
|
||||
// 隐藏结果框的函数
|
||||
function hideResultBox(box) {
|
||||
box.style.animation = 'fadeOutUp 1s ease-in-out';
|
||||
box.style.maxHeight = '0';
|
||||
box.style.padding = '0';
|
||||
setTimeout(() => {
|
||||
box.style.display = 'none';
|
||||
box.style.opacity = '0';
|
||||
}, 1000); // 确保动画完成后再隐藏
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
@ -0,0 +1,22 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="PyChainedComparisonsInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<option name="ignoreConstantInTheMiddle" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PyPep8Inspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<option name="ignoredErrors">
|
||||
<list>
|
||||
<option value="E501" />
|
||||
</list>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
<inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<option name="ignoredErrors">
|
||||
<list>
|
||||
<option value="N806" />
|
||||
</list>
|
||||
</option>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<settings>
|
||||
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||
<version value="1.0" />
|
||||
</settings>
|
||||
</component>
|
||||
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.8 (pythonProject)" project-jdk-type="Python SDK" />
|
||||
</project>
|
||||
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/pythonProject.iml" filepath="$PROJECT_DIR$/.idea/pythonProject.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="PYTHON_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,103 @@
|
||||
*.7z filter=lfs diff=lfs merge=lfs -text
|
||||
*.arrow filter=lfs diff=lfs merge=lfs -text
|
||||
*.bin filter=lfs diff=lfs merge=lfs -text
|
||||
*.bin.* filter=lfs diff=lfs merge=lfs -text
|
||||
*.bz2 filter=lfs diff=lfs merge=lfs -text
|
||||
*.ftz filter=lfs diff=lfs merge=lfs -text
|
||||
*.gz filter=lfs diff=lfs merge=lfs -text
|
||||
*.h5 filter=lfs diff=lfs merge=lfs -text
|
||||
*.joblib filter=lfs diff=lfs merge=lfs -text
|
||||
*.lfs.* filter=lfs diff=lfs merge=lfs -text
|
||||
*.model filter=lfs diff=lfs merge=lfs -text
|
||||
*.msgpack filter=lfs diff=lfs merge=lfs -text
|
||||
*.onnx filter=lfs diff=lfs merge=lfs -text
|
||||
*.ot filter=lfs diff=lfs merge=lfs -text
|
||||
*.parquet filter=lfs diff=lfs merge=lfs -text
|
||||
*.pb filter=lfs diff=lfs merge=lfs -text
|
||||
*.pt filter=lfs diff=lfs merge=lfs -text
|
||||
*.pth filter=lfs diff=lfs merge=lfs -text
|
||||
*.rar filter=lfs diff=lfs merge=lfs -text
|
||||
saved_model/**/* filter=lfs diff=lfs merge=lfs -text
|
||||
*.tar filter=lfs diff=lfs merge=lfs -text
|
||||
*.tar.* filter=lfs diff=lfs merge=lfs -text
|
||||
*.mat filter=lfs diff=lfs merge=lfs -text
|
||||
*.npz filter=lfs diff=lfs merge=lfs -text
|
||||
*.npy filter=lfs diff=lfs merge=lfs -text
|
||||
*.h5 filter=lfs diff=lfs merge=lfs -text
|
||||
*.hdf5 filter=lfs diff=lfs merge=lfs -text
|
||||
*.pickle filter=lfs diff=lfs merge=lfs -text
|
||||
*.pkl filter=lfs diff=lfs merge=lfs -text
|
||||
*.tflite filter=lfs diff=lfs merge=lfs -text
|
||||
*.tgz filter=lfs diff=lfs merge=lfs -text
|
||||
*.xz filter=lfs diff=lfs merge=lfs -text
|
||||
*.zip filter=lfs diff=lfs merge=lfs -text
|
||||
*.zstandard filter=lfs diff=lfs merge=lfs -text
|
||||
*.tfevents* filter=lfs diff=lfs merge=lfs -text
|
||||
*.db* filter=lfs diff=lfs merge=lfs -text
|
||||
*.ark* filter=lfs diff=lfs merge=lfs -text
|
||||
**/*ckpt*data* filter=lfs diff=lfs merge=lfs -text
|
||||
**/*ckpt*.meta filter=lfs diff=lfs merge=lfs -text
|
||||
**/*ckpt*.index filter=lfs diff=lfs merge=lfs -text
|
||||
*.safetensors filter=lfs diff=lfs merge=lfs -text
|
||||
*.ckpt filter=lfs diff=lfs merge=lfs -text
|
||||
*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
*.png filter=lfs diff=lfs merge=lfs -text
|
||||
*.jpeg filter=lfs diff=lfs merge=lfs -text
|
||||
*.bmp filter=lfs diff=lfs merge=lfs -text
|
||||
*.gif filter=lfs diff=lfs merge=lfs -text
|
||||
*.webp filter=lfs diff=lfs merge=lfs -text
|
||||
*.mp3 filter=lfs diff=lfs merge=lfs -text
|
||||
*.wav filter=lfs diff=lfs merge=lfs -text
|
||||
*.wma filter=lfs diff=lfs merge=lfs -text
|
||||
*.aac filter=lfs diff=lfs merge=lfs -text
|
||||
*.ogg filter=lfs diff=lfs merge=lfs -text
|
||||
*.m4a filter=lfs diff=lfs merge=lfs -text
|
||||
*.m3u8 filter=lfs diff=lfs merge=lfs -text
|
||||
*.amr filter=lfs diff=lfs merge=lfs -text
|
||||
*.audio filter=lfs diff=lfs merge=lfs -text
|
||||
*.avi filter=lfs diff=lfs merge=lfs -text
|
||||
*.flv filter=lfs diff=lfs merge=lfs -text
|
||||
*.mp4 filter=lfs diff=lfs merge=lfs -text
|
||||
*.mpg filter=lfs diff=lfs merge=lfs -text
|
||||
*.asf filter=lfs diff=lfs merge=lfs -text
|
||||
*.mov filter=lfs diff=lfs merge=lfs -text
|
||||
*.mpeg filter=lfs diff=lfs merge=lfs -text
|
||||
*.3gp filter=lfs diff=lfs merge=lfs -text
|
||||
*.wmv filter=lfs diff=lfs merge=lfs -text
|
||||
*.rmvb filter=lfs diff=lfs merge=lfs -text
|
||||
*.rm filter=lfs diff=lfs merge=lfs -text
|
||||
*.ts filter=lfs diff=lfs merge=lfs -text
|
||||
*.mkv filter=lfs diff=lfs merge=lfs -text
|
||||
*.flash filter=lfs diff=lfs merge=lfs -text
|
||||
*.vob filter=lfs diff=lfs merge=lfs -text
|
||||
*.pdf filter=lfs diff=lfs merge=lfs -text
|
||||
*.ost filter=lfs diff=lfs merge=lfs -text
|
||||
*.pst filter=lfs diff=lfs merge=lfs -text
|
||||
*.doc filter=lfs diff=lfs merge=lfs -text
|
||||
*.docx filter=lfs diff=lfs merge=lfs -text
|
||||
*.txt filter=lfs diff=lfs merge=lfs -text
|
||||
*.ppt filter=lfs diff=lfs merge=lfs -text
|
||||
*.pptx filter=lfs diff=lfs merge=lfs -text
|
||||
*.xls filter=lfs diff=lfs merge=lfs -text
|
||||
*.xlsx filter=lfs diff=lfs merge=lfs -text
|
||||
*.vsd filter=lfs diff=lfs merge=lfs -text
|
||||
*.vsdx filter=lfs diff=lfs merge=lfs -text
|
||||
*.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
*.json filter=lfs diff=lfs merge=lfs -text
|
||||
dataset_infos.json ignore
|
||||
*.csv filter=lfs diff=lfs merge=lfs -text
|
||||
*.tsv filter=lfs diff=lfs merge=lfs -text
|
||||
|
||||
cail2021_rc/cail_21_rc.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
cail2022_summarization.wo_art/cail_22_summarization.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
hanfei/zh_law_conversation_v2.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
hanfei/zh_law_instruction_v2.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
lawGPT_zh/lawgpt4analyse_v2.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
lawGPT_zh/lawgpt4answer_v2.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
lawGPT_zh/lawgpt4fatiao_v2.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
OL_CC/OL_CC.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
pretrain_judge_w_article/judge_w_article_v6.jsonl filter=lfs diff=lfs merge=lfs -text
|
||||
pretrain_small_law/complement.json filter=lfs diff=lfs merge=lfs -text
|
||||
pretrain_small_law/query_item.json filter=lfs diff=lfs merge=lfs -text
|
||||
syllogism/legal_article.json filter=lfs diff=lfs merge=lfs -text
|
||||
syllogism/syllogism.json filter=lfs diff=lfs merge=lfs -text
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,19 @@
|
||||
# 这是一个示例 Python 脚本。
|
||||
import json
|
||||
|
||||
# 假设你的原始JSON文件是一行一个JSON对象的形式存储在一个文本文件中
|
||||
input_file_path = 'C:\Users\Lenovo\Desktop\git\legal_counsel\src\软工界面\json\legalAdvice.json' # 替换为你的输入文件路径
|
||||
output_file_path = 'C:\Users\Lenovo\Desktop\git\legal_counsel\src\软工界面\json\legalAdvice - 副本.json' # 替换为你想要保存的新文件路径
|
||||
|
||||
# 读取原始JSON文件
|
||||
with open(input_file_path, 'r', encoding='utf-8') as file:
|
||||
lines = file.readlines()
|
||||
|
||||
# 将每行转换为JSON对象并存储在列表中
|
||||
data = [json.loads(line) for line in lines]
|
||||
|
||||
# 将修改后的JSON数据写入新的文件
|
||||
with open(output_file_path, 'w', encoding='utf-8') as file:
|
||||
json.dump(data, file, ensure_ascii=False, indent=4)
|
||||
|
||||
print(f"JSON文件已转换并保存到 {output_file_path}")
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,44 @@
|
||||
{
|
||||
"alpaca": {
|
||||
"file_name": "alpaca"
|
||||
},
|
||||
"oaast_sft_zh":{
|
||||
"file_name": "oaast_sft_zh.json"
|
||||
},
|
||||
"belle": {
|
||||
"file_name": "belle"
|
||||
},
|
||||
"cail2021_rc": {
|
||||
"file_name": "cail2021_rc"
|
||||
},
|
||||
"cail2022_summarization": {
|
||||
"file_name": "cail2022_summarization"
|
||||
},
|
||||
"case_retrieval": {
|
||||
"file_name": "case_retrieval"
|
||||
},
|
||||
"hanfei": {
|
||||
"file_name": "hanfei"
|
||||
},
|
||||
"lawGPT_zh": {
|
||||
"file_name": "lawGPT_zh"
|
||||
},
|
||||
"lawyerllama": {
|
||||
"file_name": "lawyerllama"
|
||||
},
|
||||
"lawyerllama_counsel": {
|
||||
"file_name": "lawyerllama_counsel"
|
||||
},
|
||||
"pretrain_small_law": {
|
||||
"file_name": "pretrain_small_law"
|
||||
},
|
||||
"pretrain_judge_w_article": {
|
||||
"file_name": "pretrain_judge_w_article"
|
||||
},
|
||||
"syllogism": {
|
||||
"file_name": "syllogism"
|
||||
},
|
||||
"OL_CC": {
|
||||
"file_name": "OL_CC"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue