|
@@ -38,33 +38,214 @@
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
align-items: center;
|
|
- padding: 24px 24px 16px;
|
|
|
|
- border-bottom: 1px solid #f0f0f0;
|
|
|
|
|
|
+ padding: 24px 32px;
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
+ border-bottom: none;
|
|
|
|
+ position: relative;
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- h3 {
|
|
|
|
- margin: 0;
|
|
|
|
- font-size: 20px;
|
|
|
|
- font-weight: 600;
|
|
|
|
- color: #2c3e50;
|
|
|
|
|
|
+ // 背景装饰
|
|
|
|
+ &::before {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: -50%;
|
|
|
|
+ right: -10%;
|
|
|
|
+ width: 300px;
|
|
|
|
+ height: 300px;
|
|
|
|
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header-left {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ gap: 16px;
|
|
|
|
+ z-index: 1;
|
|
|
|
+
|
|
|
|
+ .designer-avatar {
|
|
|
|
+ width: 56px;
|
|
|
|
+ height: 56px;
|
|
|
|
+ background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
+ border: 3px solid rgba(255, 255, 255, 0.3);
|
|
|
|
+
|
|
|
|
+ .avatar-icon {
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header-info {
|
|
|
|
+ h3 {
|
|
|
|
+ margin: 0 0 4px 0;
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .header-subtitle {
|
|
|
|
+ margin: 0;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
.close-btn {
|
|
- background: none;
|
|
|
|
- border: none;
|
|
|
|
- font-size: 24px;
|
|
|
|
- color: #95a5a6;
|
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.3);
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- padding: 4px;
|
|
|
|
- border-radius: 4px;
|
|
|
|
- transition: all 0.2s ease;
|
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
|
+
|
|
|
|
+ .close-icon {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ }
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
- background: #f8f9fa;
|
|
|
|
- color: #e74c3c;
|
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
|
+ border-color: rgba(255, 255, 255, 0.5);
|
|
|
|
+ transform: rotate(90deg) scale(1.1);
|
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+// 筛选和统计区域
|
|
|
|
+.filter-stats-section {
|
|
|
|
+ background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
|
|
|
|
+ padding: 24px 32px;
|
|
|
|
+ border-bottom: 2px solid #e9ecef;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.quick-filters {
|
|
|
|
+ display: grid;
|
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
|
+ gap: 16px;
|
|
|
|
+ align-items: end;
|
|
|
|
+
|
|
|
|
+ .filter-group {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ gap: 8px;
|
|
|
|
+
|
|
|
|
+ &.checkbox-group {
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ padding-bottom: 4px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .filter-label {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ gap: 6px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ color: #495057;
|
|
|
|
+
|
|
|
|
+ .label-icon {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .label-text {
|
|
|
|
+ letter-spacing: 0.3px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .filter-select {
|
|
|
|
+ padding: 10px 36px 10px 14px;
|
|
|
|
+ border: 2px solid #dee2e6;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #495057;
|
|
|
|
+ background: white;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
+ appearance: none;
|
|
|
|
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23495057' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
+ background-position: right 12px center;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ border-color: #667eea;
|
|
|
|
+ box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:focus {
|
|
|
|
+ outline: none;
|
|
|
|
+ border-color: #667eea;
|
|
|
|
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .checkbox-label {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ gap: 8px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ user-select: none;
|
|
|
|
+
|
|
|
|
+ .modern-checkbox {
|
|
|
|
+ width: 18px;
|
|
|
|
+ height: 18px;
|
|
|
|
+ border: 2px solid #dee2e6;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ transition: all 0.2s ease;
|
|
|
|
+ appearance: none;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ &:checked {
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
+ border-color: #667eea;
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ content: '✓';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ border-color: #667eea;
|
|
|
|
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .checkbox-text {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: #495057;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@media (max-width: 768px) {
|
|
|
|
+ .quick-filters {
|
|
|
|
+ grid-template-columns: 1fr;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
.designer-stats {
|
|
.designer-stats {
|
|
padding: 20px 24px;
|
|
padding: 20px 24px;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
@@ -506,88 +687,252 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- // 使用 data-status 属性进行样式控制
|
|
|
|
|
|
+ // 使用 data-status 属性进行样式控制 - 增强版
|
|
&[data-status="idle"] {
|
|
&[data-status="idle"] {
|
|
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
|
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
|
- border: 2px solid #28a745;
|
|
|
|
|
|
+ border: 3px solid #28a745;
|
|
|
|
+ position: relative;
|
|
|
|
+ box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
|
|
|
|
+
|
|
|
|
+ // 空闲状态闪烁动画
|
|
|
|
+ &::after {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 4px;
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: #28a745;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
|
|
|
|
+ animation: pulse-idle 2s infinite;
|
|
|
|
+ }
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
background: linear-gradient(135deg, #c3e6cb 0%, #b1dfbb 100%);
|
|
background: linear-gradient(135deg, #c3e6cb 0%, #b1dfbb 100%);
|
|
- transform: scale(1.05);
|
|
|
|
- box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
|
|
|
|
|
|
+ transform: scale(1.08) translateY(-2px);
|
|
|
|
+ box-shadow: 0 8px 24px rgba(40, 167, 69, 0.5);
|
|
|
|
+ border-color: #20c997;
|
|
}
|
|
}
|
|
|
|
|
|
.day-number {
|
|
.day-number {
|
|
color: #155724;
|
|
color: #155724;
|
|
- font-weight: 700;
|
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
|
|
.status-label.idle-label {
|
|
.status-label.idle-label {
|
|
- background: #28a745;
|
|
|
|
|
|
+ background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
color: white;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding: 6px 12px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ box-shadow: 0 2px 6px rgba(40, 167, 69, 0.3);
|
|
|
|
+ animation: bounce-subtle 2s infinite;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&[data-status="busy-medium"] {
|
|
&[data-status="busy-medium"] {
|
|
background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
|
|
background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
|
|
- border: 2px solid #0d6efd;
|
|
|
|
|
|
+ border: 3px solid #0d6efd;
|
|
|
|
+ box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ // 忙碌状态指示器
|
|
|
|
+ &::before {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 4px;
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: #0d6efd;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ animation: pulse-busy 1.5s infinite;
|
|
|
|
+ }
|
|
|
|
|
|
.day-number {
|
|
.day-number {
|
|
color: #084298;
|
|
color: #084298;
|
|
- font-weight: 700;
|
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
|
|
.status-label.busy-label {
|
|
.status-label.busy-label {
|
|
- background: #0d6efd;
|
|
|
|
|
|
+ background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
|
|
color: white;
|
|
color: white;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding: 6px 12px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
|
|
}
|
|
}
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
background: linear-gradient(135deg, #b6d4fe 0%, #9ec5fe 100%);
|
|
background: linear-gradient(135deg, #b6d4fe 0%, #9ec5fe 100%);
|
|
- transform: scale(1.05);
|
|
|
|
- box-shadow: 0 6px 20px rgba(13, 110, 253, 0.4);
|
|
|
|
|
|
+ transform: scale(1.05) translateY(-2px);
|
|
|
|
+ box-shadow: 0 8px 24px rgba(13, 110, 253, 0.4);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&[data-status="busy-high"] {
|
|
&[data-status="busy-high"] {
|
|
background: linear-gradient(135deg, #9ec5fe 0%, #6ea8fe 100%);
|
|
background: linear-gradient(135deg, #9ec5fe 0%, #6ea8fe 100%);
|
|
- border: 2px solid #0a58ca;
|
|
|
|
|
|
+ border: 3px solid #0a58ca;
|
|
|
|
+ box-shadow: 0 3px 12px rgba(10, 88, 202, 0.3);
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ // 高负荷状态双指示器
|
|
|
|
+ &::before {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 4px;
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: #0a58ca;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ animation: pulse-busy-high 1s infinite;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 18px;
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ background: #0a58ca;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ animation: pulse-busy-high 1s 0.3s infinite;
|
|
|
|
+ }
|
|
|
|
|
|
.day-number {
|
|
.day-number {
|
|
color: #052c65;
|
|
color: #052c65;
|
|
- font-weight: 700;
|
|
|
|
|
|
+ font-weight: 900;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
|
|
.status-label.busy-label {
|
|
.status-label.busy-label {
|
|
- background: #0a58ca;
|
|
|
|
|
|
+ background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
|
|
color: white;
|
|
color: white;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding: 6px 12px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ box-shadow: 0 2px 8px rgba(10, 88, 202, 0.4);
|
|
|
|
+ animation: pulse-scale 1.5s infinite;
|
|
}
|
|
}
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
background: linear-gradient(135deg, #6ea8fe 0%, #3d8bfd 100%);
|
|
background: linear-gradient(135deg, #6ea8fe 0%, #3d8bfd 100%);
|
|
- transform: scale(1.05);
|
|
|
|
- box-shadow: 0 6px 20px rgba(10, 88, 202, 0.5);
|
|
|
|
|
|
+ transform: scale(1.05) translateY(-2px);
|
|
|
|
+ box-shadow: 0 10px 28px rgba(10, 88, 202, 0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&[data-status="review"] {
|
|
&[data-status="review"] {
|
|
background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
|
|
background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
|
|
- border: 2px solid #dc3545;
|
|
|
|
|
|
+ border: 3px solid #dc3545;
|
|
cursor: not-allowed;
|
|
cursor: not-allowed;
|
|
|
|
+ box-shadow: 0 3px 12px rgba(220, 53, 69, 0.3);
|
|
|
|
+ position: relative;
|
|
|
|
+ opacity: 0.95;
|
|
|
|
+
|
|
|
|
+ // 对图日警告指示
|
|
|
|
+ &::before {
|
|
|
|
+ content: '⚠️';
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 4px;
|
|
|
|
+ right: 4px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ animation: shake 2s infinite;
|
|
|
|
+ }
|
|
|
|
|
|
.day-number {
|
|
.day-number {
|
|
color: #842029;
|
|
color: #842029;
|
|
- font-weight: 700;
|
|
|
|
|
|
+ font-weight: 900;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
}
|
|
|
|
|
|
.status-label.review-label {
|
|
.status-label.review-label {
|
|
- background: #dc3545;
|
|
|
|
|
|
+ background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
|
|
color: white;
|
|
color: white;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ padding: 6px 12px;
|
|
|
|
+ border-radius: 16px;
|
|
|
|
+ box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
|
|
}
|
|
}
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
transform: none;
|
|
transform: none;
|
|
- box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
|
|
|
|
|
|
+ box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 动画定义
|
|
|
|
+ @keyframes pulse-idle {
|
|
|
|
+ 0% {
|
|
|
|
+ box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
|
|
|
|
+ }
|
|
|
|
+ 70% {
|
|
|
|
+ box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
|
|
|
|
+ }
|
|
|
|
+ 100% {
|
|
|
|
+ box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes pulse-busy {
|
|
|
|
+ 0%, 100% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ transform: scale(1.3);
|
|
|
|
+ opacity: 0.7;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes pulse-busy-high {
|
|
|
|
+ 0%, 100% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes pulse-scale {
|
|
|
|
+ 0%, 100% {
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ transform: scale(1.05);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes bounce-subtle {
|
|
|
|
+ 0%, 100% {
|
|
|
|
+ transform: translateY(0);
|
|
|
|
+ }
|
|
|
|
+ 50% {
|
|
|
|
+ transform: translateY(-2px);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes shake {
|
|
|
|
+ 0%, 100% {
|
|
|
|
+ transform: translateX(0);
|
|
|
|
+ }
|
|
|
|
+ 10%, 30%, 50%, 70%, 90% {
|
|
|
|
+ transform: translateX(-2px);
|
|
|
|
+ }
|
|
|
|
+ 20%, 40%, 60%, 80% {
|
|
|
|
+ transform: translateX(2px);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|