8,667
edits
No edit summary |
No edit summary |
||
Line 25: | Line 25: | ||
font-family: 'MyCustomFont2', sans-serif; /* Шрифт */ | font-family: 'MyCustomFont2', sans-serif; /* Шрифт */ | ||
color: #333; /* Цвет текста */ | color: #333; /* Цвет текста */ | ||
position: relative; /* Для позиционирования | position: relative; /* Для позиционирования псевдоэлемента */ | ||
} | } | ||
/* Эффект при наведении */ | |||
.copyable-text:hover { | .copyable-text:hover { | ||
background-color: #CFC8B2; /* Цвет фона при наведении */ | background-color: #CFC8B2; /* Цвет фона при наведении */ | ||
Line 39: | Line 40: | ||
} | } | ||
/* Стиль для | /* Стиль для текста "Copied" через псевдоэлемент */ | ||
.copyable-text .copied | .copyable-text.copied::after { | ||
position: | content: "Copied"; /* Текст "Copied" */ | ||
position: absolute; | |||
top: -25px; /* Расположение над элементом */ | |||
left: 50%; | |||
transform: translateX(-50%); /* Центрируем по горизонтали */ | |||
background-color: #D02019; /* Красный фон */ | background-color: #D02019; /* Красный фон */ | ||
color: white; /* Белый текст */ | color: white; /* Белый текст */ | ||
Line 47: | Line 52: | ||
border-radius: 5px; | border-radius: 5px; | ||
font-size: 0.8em; | font-size: 0.8em; | ||
opacity: 0; /* Изначально скрыт */ | |||
opacity: 0; /* Изначально | |||
transition: opacity 0.3s ease; /* Плавное исчезновение */ | transition: opacity 0.3s ease; /* Плавное исчезновение */ | ||
} | } | ||
/* Показываем текст "Copied" и запускаем анимацию исчезновения */ | |||
.copyable-text.copied::after { | |||
opacity: 1; | |||
animation: fadeOut 1.3s forwards; /* Анимация исчезновения */ | |||
} | |||
/* Анимация для плавного исчезновения */ | |||
@keyframes fadeOut { | |||
0% { opacity: 1; } | |||
77% { opacity: 1; } /* 77% от 1.3s = ~1s, текст виден 1 секунду */ | |||
100% { opacity: 0; } | |||
} | |||
/* Kitchen Sink Logo*/ | /* Kitchen Sink Logo*/ |