新增CSS动画效果和交互样式优化
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user