W
O
R
K
W W W W W W W W
O O O O O O O O
R R R R R R R R
K K K K K K K K
Проект 1
Описание проекта 1
Проект 2
Описание проекта 2
Проект 3
Описание проекта 3
Проект 4
Описание проекта 4
/* *** Стили секции Work *** */
/* Размеры и цветовой дизайн секции */
.work-section {
position: relative;
width: 100%;
height: 100vh; /* секция занимает высоту окна для эффектов */
background: #FF0050; /* ярко-красный фон секции (начальное состояние) */
overflow: hidden;
color: #000;
}
/* Заголовок "WORK" (начальное вертикальное отображение) */
.work-heading {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: #000; /* чёрный фон под буквами (капсула) */
padding: 20px 40px;
border-radius: 50px; /* скруглённые края - капсула */
text-align: center;
}
.work-heading .work-char {
display: block;
font-family: Arial, sans-serif; /* используйте нужный шрифт */
font-weight: 900;
font-size: 8vw;
color: #FF0050; /* цвет букв - неоново-красный */
line-height: 1;
}
/* Стили блока с 3D-тоннелем букв (по умолчанию скрыт) */
.letter-tunnel {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
/* perspective задаёт перспективу для дочерних элементов */
perspective: 600px;
transform-style: preserve-3d;
opacity: 0; /* изначально невидим, появится при анимации */
}
.letter-tunnel .letter-row {
font-family: Arial, sans-serif;
font-weight: 900;
font-size: 10vw;
color: #FF0050;
white-space: nowrap; /* чтобы повторенные буквы не переносились */
transform-origin: center center;
}
/* Разные ряды можно чуть поворачивать/смещать для эффекта объемности: */
.letter-tunnel .letter-row:nth-child(1) { transform: translateZ(-100px) rotateX(30deg); }
.letter-tunnel .letter-row:nth-child(2) { transform: translateZ(-50px) rotateX(15deg); }
.letter-tunnel .letter-row:nth-child(3) { transform: translateZ(0px) rotateX(0deg); }
.letter-tunnel .letter-row:nth-child(4) { transform: translateZ(50px) rotateX(-15deg); }
/* Фоновые частицы */
.particles {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none; /* частицы не мешают кликам по другим элементам */
}
.particle-dot {
position: absolute;
width: 6px; height: 6px;
background: #FF5050; /* цвет частиц - чуть более светлый красный */
border-radius: 50%;
opacity: 0.8;
}
/* Карточки проектов */
.work-card {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 60%; /* ширина карточки относительно экрана */
max-width: 800px;
background: #FFFFFF;
color: #000;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
opacity: 0; /* скрыты по умолчанию, будут появляться */
}
.work-card h3 {
margin-top: 0;
}