aiotagro/niumalll
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增CSS动画效果和交互样式优化

Browse Source
This commit is contained in:
aiotagro
2025-09-12 20:24:46 +08:00
parent 85fb53d57c
commit a85cc9b25a
2 changed files with 356 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

351
website/css/custom.css
View File

@@ -1,6 +1,5 @@
/* 自定义样式文件 - 活牛采购智能数字化系统官网 */
/* 全局样式 - 按照需求文档规范优化配色 */
:root {
--primary-color: #4CAF50; /* 农业绿色主色调 */
--primary-light: #81C784; /* 浅绿色 */
@@ -44,6 +43,7 @@
--spacing-3xl: 4rem;
}
/* 全局样式 */
* {
margin: 0;
padding: 0;
@@ -2173,3 +2173,352 @@ img.lazy.loaded {
.z-index-9999 {
z-index: 9999 !important;
}
/* 新增高级动画效果 */
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fade-in-scale {
animation: fadeInScale 0.3s ease-out forwards;
}
@keyframes slideInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.slide-in-up {
animation: slideInUp 0.3s ease-out forwards;
}
@keyframes slideInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.slide-in-down {
animation: slideInDown 0.3s ease-out forwards;
}
/* 新增交互动画 */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-rotate {
transition: transform 0.3s ease;
}
.hover-rotate:hover {
transform: rotate(5deg);
}
/* 新增按钮交互动画 */
.btn-hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-hover-lift:hover {
transform: translateY(-3px);
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.btn-hover-scale {
transition: transform 0.3s ease;
}
.btn-hover-scale:hover {
transform: scale(1.05);
}
/* 新增卡片交互动画 */
.card-hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.card-hover-scale {
transition: transform 0.3s ease;
}
.card-hover-scale:hover {
transform: scale(1.02);
}
/* 新增图标动画 */
.icon-hover-bounce {
transition: transform 0.3s ease;
}
.icon-hover-bounce:hover {
transform: translateY(-3px);
animation: bounce 0.6s ease infinite;
}
.icon-hover-spin {
transition: transform 0.3s ease;
}
.icon-hover-spin:hover {
transform: rotate(360deg);
}
.icon-hover-pulse {
transition: transform 0.3s ease;
}
.icon-hover-pulse:hover {
animation: pulse 0.6s ease infinite;
}
/* 新增加载动画 */
@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-spinner {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid rgba(76, 175, 80, 0.2);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: loading 0.6s linear infinite;
}
.loading-spinner-lg {
width: 2rem;
height: 2rem;
border-width: 3px;
}
/* 新增进度条动画 */
.progress-animated {
overflow: hidden;
}
.progress-animated .progress-bar {
position: relative;
overflow: hidden;
}
.progress-animated .progress-bar::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: progressAnimation 2s infinite;
}
@keyframes progressAnimation {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* 新增闪烁动画 */
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.blink {
animation: blink 1s ease-in-out infinite;
}
/* 新增呼吸动画 */
@keyframes breathe {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.breathe {
animation: breathe 2s ease-in-out infinite;
}
/* 新增波纹动画 */
@keyframes ripple {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(76, 175, 80, 0.2);
transform: translate(-50%, -50%);
opacity: 0;
}
.ripple:active::after {
animation: ripple 0.6s ease-out;
}
/* 新增粒子动画 */
@keyframes particle {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background: var(--primary-color);
border-radius: 50%;
animation: particle 2s ease-out infinite;
}
/* 新增视差滚动效果 */
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax-back {
transform: translateZ(-1px) scale(2);
}
.parallax-base {
transform: translateZ(0);
}
/* 新增粘性页脚 */
.footer-sticky {
position: sticky;
top: 100vh;
}
/* 新增分隔线样式 */
.divider {
position: relative;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
margin: 2rem 0;
}
.divider::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: var(--primary-color);
border-radius: 50%;
transform: translate(-50%, -50%);
}
/* 新增徽章动画 */
.badge-animated {
position: relative;
overflow: hidden;
}
.badge-animated::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: badgeAnimation 2s infinite;
}
@keyframes badgeAnimation {
0% {
left: -100%;
}
100% {
left: 100%;
}
}

12
website/index.html
View File

@@ -345,7 +345,7 @@
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card case-card h-100 border-0 card-hover">
<img src="images/case1.jpg" class="card-img-top" alt="XX牧业集团" loading="lazy">
<img src="images/case1.jpg" class="card-img-top img-hover-zoom" alt="XX牧业集团" loading="lazy">
<div class="card-body">
<span class="badge bg-primary mb-2">大型企业</span>
<h5 class="card-title">XX牧业集团采购数字化转型</h5>
@@ -357,7 +357,7 @@
<div class="col-md-6 col-lg-4">
<div class="card case-card h-100 border-0 card-hover">
<img src="images/case2.jpg" class="card-img-top" alt="YY生态牧场" loading="lazy">
<img src="images/case2.jpg" class="card-img-top img-hover-zoom" alt="YY生态牧场" loading="lazy">
<div class="card-body">
<span class="badge bg-success mb-2">中型企业</span>
<h5 class="card-title">YY生态牧场采购管理升级</h5>
@@ -369,7 +369,7 @@
<div class="col-md-6 col-lg-4">
<div class="card case-card h-100 border-0 card-hover">
<img src="images/case3.jpg" class="card-img-top" alt="ZZ活牛贸易平台" loading="lazy">
<img src="images/case3.jpg" class="card-img-top img-hover-zoom" alt="ZZ活牛贸易平台" loading="lazy">
<div class="card-body">
<span class="badge bg-info mb-2">贸易商</span>
<h5 class="card-title">ZZ活牛贸易平台业务优化</h5>
@@ -397,7 +397,7 @@
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card news-card h-100 border-0 card-hover">
<img src="images/news1.jpg" class="card-img-top" alt="产品更新" loading="lazy">
<img src="images/news1.jpg" class="card-img-top img-hover-zoom" alt="产品更新" loading="lazy">
<div class="card-body">
<span class="badge bg-primary mb-2">产品更新</span>
<h5 class="card-title">活牛采购智能数字化系统V3.0正式发布</h5>
@@ -409,7 +409,7 @@
<div class="col-md-6 col-lg-4">
<div class="card news-card h-100 border-0 card-hover">
<img src="images/news2.jpg" class="card-img-top" alt="行业资讯" loading="lazy">
<img src="images/news2.jpg" class="card-img-top img-hover-zoom" alt="行业资讯" loading="lazy">
<div class="card-body">
<span class="badge bg-success mb-2">行业资讯</span>
<h5 class="card-title">数字化转型推动畜牧业高质量发展</h5>
@@ -421,7 +421,7 @@
<div class="col-md-6 col-lg-4">
<div class="card news-card h-100 border-0 card-hover">
<img src="images/news3.jpg" class="card-img-top" alt="客户案例" loading="lazy">
<img src="images/news3.jpg" class="card-img-top img-hover-zoom" alt="客户案例" loading="lazy">
<div class="card-body">
<span class="badge bg-info mb-2">客户案例</span>
<h5 class="card-title">XX牧业集团成功实施采购数字化项目</h5>