142 lines
2.5 KiB
CSS
142 lines
2.5 KiB
CSS
/* src/styles/animations.css */
|
|
|
|
/* 粒子背景入场动画 */
|
|
@keyframes particles-fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* 姓名文字渐变动画 */
|
|
@keyframes name-gradient-shift {
|
|
0%, 100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
/* 社交图标悬停脉冲效果 */
|
|
@keyframes social-pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(122, 197, 232, 0.4);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 12px rgba(122, 197, 232, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(122, 197, 232, 0);
|
|
}
|
|
}
|
|
|
|
/* 微信二维码弹窗动画 */
|
|
@keyframes modal-fade-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* 光标闪烁动画 */
|
|
@keyframes blink-caret {
|
|
from, to {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 背景粒子浮动效果 */
|
|
@keyframes particle-float {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
|
|
/* 应用动画的CSS类 */
|
|
.particle-container {
|
|
animation: particles-fade-in 1.5s ease-out forwards;
|
|
}
|
|
|
|
.name-gradient-animation {
|
|
background: linear-gradient(
|
|
135deg,
|
|
#a8d8ea 0%,
|
|
#7ac5e8 50%,
|
|
#56b4d3 100%
|
|
);
|
|
background-size: 200% 200%;
|
|
animation: name-gradient-shift 8s ease infinite;
|
|
}
|
|
|
|
.social-icon-hover {
|
|
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
}
|
|
|
|
.social-icon-hover:hover {
|
|
animation: social-pulse 1.5s infinite;
|
|
}
|
|
|
|
.wechat-modal-content {
|
|
animation: modal-fade-in 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards;
|
|
}
|
|
|
|
.typewriter-cursor {
|
|
animation: blink-caret 0.75s step-end infinite;
|
|
}
|
|
|
|
.particle-float {
|
|
animation: particle-float 6s ease-in-out infinite;
|
|
}
|
|
|
|
/* 响应式动画调整 */
|
|
@media (max-width: 768px) {
|
|
@keyframes name-gradient-shift {
|
|
0%, 100% {
|
|
background-position: 0% 30%;
|
|
}
|
|
50% {
|
|
background-position: 100% 30%;
|
|
}
|
|
}
|
|
|
|
.wechat-modal-content {
|
|
animation-name: modal-fade-in-mobile;
|
|
}
|
|
|
|
@keyframes modal-fade-in-mobile {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 性能优化设置 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|