Usus2: различия между версиями

Материал из SS220 SS14 WIKI
ВизуальныйВики-текст
мНет описания правки
мНет описания правки
 
(не показано 6 промежуточных версий этого же участника)
Строка 16: Строка 16:
.tabs {
.tabs {
     position: relative;
     position: relative;
     margin: 30px 0;
     margin: 20px 0;
}
}


Строка 29: Строка 29:
     display: inline-block;
     display: inline-block;
     padding: 5px 5px;
     padding: 5px 5px;
     margin: 0 10px;
     margin: 0 -2px; /* Убираем промежутки */
     cursor: pointer;
     cursor: pointer;
     color: #fff;
     color: #fff;
     background: linear-gradient(145deg, #8B0000, #6A0000);
     background: linear-gradient(145deg, #8B0000, #6A0000);
     border: none;
     border: none;
    border-radius: 0px;
     transition: all 0.3s ease;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     font-family: 'Arial Rounded MT', Arial, sans-serif;
     font-family: 'Arial Rounded MT', Arial, sans-serif;
     font-size: 16px;
     font-size: 16px;
     box-shadow: 0 4px 10px rgba(139, 0, 0, 0.2);
     position: relative;
     transform: scale(0.95);
     z-index: 1;
}
}


/* Анимация для активной вкладки */
/* Активная вкладка */
.tabs input:checked + label {
.tabs input:checked + label {
     background: linear-gradient(145deg, #6A0000, #8B0000);
     background: linear-gradient(145deg, #6A0000, #8B0000);
    transform: scale(1.05);
     z-index: 3;
    box-shadow: 0 8px 20px rgba(139, 0, 0, 0.3);
     transform: translateY(2px);
     z-index: 2;
}
 
/* Эффекты при наведении */
.tabs label:hover {
    background: linear-gradient(145deg, #A60000, #8B0000);
     transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(139, 0, 0, 0.35);
}
}


/* Анимированный контент */
/* Содержимое вкладок */
.tab-content {
.tab-content {
     opacity: 0;
     display: none;
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    margin-top: 20px;
    border-radius: 20px;
    background: rgba(112, 46, 46, 0.95);
    color: white;
    transition: all 0.6s ease-in-out;
    transform: translateY(-10px);
}
 
/* Анимация появления контента */
.tabs input:checked ~ .tab-content {
    opacity: 1;
    max-height: 1000px;
     padding: 25px;
     padding: 25px;
     margin-top: 15px;
     background: #2d0a0a; /* Темный фон */
     transform: translateY(0);
    border: 2px solid #630000;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     margin-top: -2px;
     box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}
}


/* Стили для таблиц с анимацией */
/* Текст внутри содержимого */
.wikitable {
.tab-content p, .tab-content div {
     border: 2px solid rgba(255, 255, 255, 0.1);
     background: rgba(70, 25, 25, 0.9); /* Фон для текста */
     border-collapse: collapse;
     padding: 15px;
     width: 100%;
     border-radius: 5px;
     margin: 20px 0;
     margin: 10px 0;
     background: rgba(70, 25, 25, 0.9);
     box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
    transform: scale(0.98);
    transition: transform 0.3s ease;
}
}


.wikitable:hover {
/* Активация вкладки */
     transform: scale(1);
.tabs input:checked ~ .tab-content {
     box-shadow: 0 0 20px rgba(139, 0, 0, 0.2);
     display: block;
     animation: fadeIn 0.4s ease;
}
}


.wikitable th,
@keyframes fadeIn {
.wikitable td {
     from { opacity: 0; }
     padding: 12px;
     to { opacity: 1; }
    border: 1px solid rgba(255, 255, 255, 0.15);
     transition: background 0.3s ease;
}
}


.wikitable th {
/* Эффекты при наведении */
     background: linear-gradient(145deg, #8B0000, #6A0000);
.tabs label:hover {
    color: #fff;
     background: linear-gradient(145deg, #A60000, #8B0000);
    font-weight: 600;
}
 
.wikitable tr:hover td {
    background: rgba(139, 0, 0, 0.1);
}
 
/* Эффект свечения для активных элементов */
@keyframes glow {
    0% { box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.5); }
    100% { box-shadow: 0 0 10px rgba(139, 0, 0, 0.3); }
}
 
.tabs input:checked + label {
    animation: glow 1.5s infinite;
}
}
</style>
</style>
<div class="tabs">
    <input type="radio" name="tabs" id="tab1" checked>
    <label for="tab1">Первая вкладка</label>
    <div class="tab-content">
        <table class="wikitable">
            <tr>
                <th>Заголовок</th>
                <th>Таблица</th>
            </tr>
            <tr>
                <td>Анимированные</td>
                <td>Элементы</td>
            </tr>
        </table>
    </div>
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2">Вторая вкладка</label>
    <div class="tab-content">
        Контент с плавным появлением
    </div>
</div>
}}
}}

Текущая версия от 16:01, 1 апреля 2025

тест

мега тест

тестик

Нихуя себе


Источник — https://wiki14.ss220.club/index.php?title=Usus2&oldid=9385
Последнее изменение
Эта страница в последний раз была отредактирована 1 апреля 2025 в 16:01.
Авторские права
Содержание доступно по лицензии Creative Commons Attribution-NonCommercial-ShareAlike (если не указано иное).