Инструкция
Это уже модификация скорее для продвинутых пользователей: код большой и состоит из нескольких независимых частей. Его необязательно использовать целиком как готовый экран — можно взять только сам эффект Liquid Glass, отдельную стеклянную кнопку, карточку, слайдер, переключатель, спиннер или декоративную орбиту и встроить в свой дизайн.
Если вы уверенно работаете с HTML и CSS, этот пример удобнее воспринимать как набор готовых компонентов. Общая логика стекла собрана в классах .bk-liquid__glass, .bk-liquid__effect, .bk-liquid__tint и .bk-liquid__shine, а остальные элементы используют эту основу. Поэтому из кода можно постепенно собирать собственные интерфейсы, не копируя весь блок целиком.
Если вы уверенно работаете с HTML и CSS, этот пример удобнее воспринимать как набор готовых компонентов. Общая логика стекла собрана в классах .bk-liquid__glass, .bk-liquid__effect, .bk-liquid__tint и .bk-liquid__shine, а остальные элементы используют эту основу. Поэтому из кода можно постепенно собирать собственные интерфейсы, не копируя весь блок целиком.
- Добавьте на страницу Tilda блок T123 «HTML-код» и вставьте в него код целиком. Блок содержит HTML, CSS, SVG-фильтр и небольшой JavaScript, поэтому ничего дополнительно подключать не нужно.
- В самом начале CSS находится блок основных настроек. Чтобы поменять фон, замените ссылку в переменной --bk-glass-bg-image на адрес своего изображения.
- Если нужно изменить основной цвет текста, поменяйте значение --bk-glass-text. Для светлого фона лучше оставить тёмный текст, а для очень тёмного изображения можно использовать светлый.
- Для изменения прозрачности стекла используйте переменную --bk-glass-tint. Чем меньше последнее значение в rgba(), тем прозрачнее карточки.
- Чтобы усилить или уменьшить размытие фона под стеклом, измените --bk-glass-blur. Например, 10px даст более прозрачное стекло, а 20px — более матовое.
- В блоке .bk-liquid__intro замените Lorem ipsum dolor sit amet на свой заголовок, а демонстрационный текст ниже — на своё описание.
- В ссылке с классом .bk-liquid__button-link замените href на нужный адрес, а текст Lorem ipsum — на название кнопки. Если ссылка должна открываться в этом же окне, удалите target="_blank".
- В ссылке .bk-liquid__logo-link замените href на нужный адрес. В расположенном внутри неё изображении замените src на ссылку на свой логотип и укажите его название в alt.
- Демонстрационные стеклянные элементы ниже можно использовать как готовые примеры. Если какой-то элемент вам не нужен, удалите соответствующую карточку .bk-liquid__card из HTML. Например, можно оставить только переключатель и слайдер.
- Начальное положение слайдера задаётся атрибутом value="58". Допустимы значения от 0 до 100.
- Переключатель изначально включён благодаря атрибуту checked. Удалите checked, если он должен отображаться выключенным при загрузке страницы.
- Скорость вращения спиннера задаётся значениями 3.4s и 2.6s у двух колец. Чем больше значение, тем медленнее вращение.
- Скорость движения декоративных орбит задаётся значениями 5.4s и 3.8s.
- Фоновое изображение медленно перемещается. Скорость задаётся значением 60s в анимации фона. Увеличьте его, если хотите сделать движение ещё спокойнее.
- После редактирования опубликуйте страницу и проверьте блок на компьютере и смартфоне. На мобильных устройствах карточки автоматически перестраиваются в одну колонку, а интерактивные элементы уменьшаются.
Рекомендации:
Для Liquid Glass особенно важен фон: на однотонной заливке эффект преломления почти не виден. Лучше выбирать изображение с крупными формами, цветовыми переходами и умеренным количеством деталей — абстрактную графику, большие листья и цветы, градиенты, мягкие волны или спокойные паттерны.
Слишком мелкий контрастный рисунок будет создавать визуальный шум. Фотография с большим количеством мелких объектов тоже обычно работает хуже, особенно когда одновременно используются несколько стеклянных карточек.
Оптимален фон средней или высокой насыщенности, но без текста и важных деталей. Через стекло должны быть видны цвет и форма, а не конкретный сюжет.
Если используете светлый фон, оставляйте тёмный текст. На очень тёмном фоне потребуется изменить --bk-glass-text и, возможно, увеличить прозрачность белой тонировки --bk-glass-tint.
Для фонового изображения лучше использовать WebP или оптимизированный JPG. Желательно загружать файл в Tilda или на собственный сервер, чтобы внешний источник изображения не пропал.
SVG-логотип предпочтительнее PNG: он остаётся резким на Retina-экранах и хорошо масштабируется внутри стеклянной карточки.
Эффект использует backdrop-filter и SVG-преломление, поэтому в разных браузерах стекло может выглядеть немного по-разному. Это нормально. В современных Chrome, Safari и Edge эффект будет наиболее выразительным.
Слишком мелкий контрастный рисунок будет создавать визуальный шум. Фотография с большим количеством мелких объектов тоже обычно работает хуже, особенно когда одновременно используются несколько стеклянных карточек.
Оптимален фон средней или высокой насыщенности, но без текста и важных деталей. Через стекло должны быть видны цвет и форма, а не конкретный сюжет.
Если используете светлый фон, оставляйте тёмный текст. На очень тёмном фоне потребуется изменить --bk-glass-text и, возможно, увеличить прозрачность белой тонировки --bk-glass-tint.
Для фонового изображения лучше использовать WebP или оптимизированный JPG. Желательно загружать файл в Tilda или на собственный сервер, чтобы внешний источник изображения не пропал.
SVG-логотип предпочтительнее PNG: он остаётся резким на Retina-экранах и хорошо масштабируется внутри стеклянной карточки.
Эффект использует backdrop-filter и SVG-преломление, поэтому в разных браузерах стекло может выглядеть немного по-разному. Это нормально. В современных Chrome, Safari и Edge эффект будет наиболее выразительным.
<!-- Адаптивный Liquid Glass-блок со стеклянными карточками и интерактивными UI-элементами для Tilda. Источник: bulgkate.ru -->
<div class="bk-liquid-demo">
<div class="bk-liquid__container">
<!-- Основная стеклянная карточка -->
<section class="bk-liquid__glass bk-liquid__intro">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<h2 class="bk-liquid__title">
Lorem ipsum dolor sit amet
</h2>
<p class="bk-liquid__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="bk-liquid__actions">
<a
class="bk-liquid__button-link"
href="https://example.com/"
target="_blank"
rel="noopener"
>
<span class="bk-liquid__glass bk-liquid__button">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<span class="bk-liquid__content">
Lorem ipsum
</span>
</span>
</a>
<a
class="bk-liquid__logo-link"
href="https://example.com/"
target="_blank"
rel="noopener"
>
<span class="bk-liquid__glass bk-liquid__logo-card">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<span class="bk-liquid__content">
<img
src="https://placehold.co/240x80/transparent/111111?text=LOGO"
alt="Логотип"
>
</span>
</span>
</a>
</div>
</div>
</section>
<!-- Демонстрационные UI-элементы -->
<div class="bk-liquid__ui-grid">
<!-- Кнопки + индикатор -->
<div class="bk-liquid__glass bk-liquid__card bk-liquid__card--volume">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<div class="bk-liquid__volume">
<button
class="bk-liquid__square-button bk-liquid__square-button--minus"
type="button"
aria-label="Уменьшить"
></button>
<div
class="bk-liquid__volume-bar"
aria-hidden="true"
></div>
<button
class="bk-liquid__square-button bk-liquid__square-button--plus"
type="button"
aria-label="Увеличить"
></button>
</div>
</div>
</div>
<!-- Слайдер -->
<div class="bk-liquid__glass bk-liquid__card bk-liquid__card--slider">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<input
class="bk-liquid__range"
type="range"
min="0"
max="100"
value="58"
aria-label="Значение"
>
</div>
</div>
<!-- Переключатель -->
<div class="bk-liquid__glass bk-liquid__card bk-liquid__card--toggle">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<label class="bk-liquid__switch">
<input
type="checkbox"
checked
aria-label="Переключатель"
>
<span class="bk-liquid__switch-track">
<span class="bk-liquid__switch-thumb"></span>
</span>
</label>
</div>
</div>
<!-- Поворотная ручка -->
<div class="bk-liquid__glass bk-liquid__card bk-liquid__card--knob">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<button
class="bk-liquid__knob"
type="button"
aria-label="Поворотная ручка"
></button>
</div>
</div>
<!-- Спиннер -->
<div class="bk-liquid__glass bk-liquid__card bk-liquid__card--spinner">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<div
class="bk-liquid__spinner"
aria-hidden="true"
>
<span class="bk-liquid__spinner-ring"></span>
<span class="bk-liquid__spinner-ring bk-liquid__spinner-ring--inner"></span>
<span class="bk-liquid__spinner-core"></span>
</div>
</div>
</div>
<!-- Орбиты -->
<div class="bk-liquid__glass bk-liquid__card bk-liquid__card--orbit">
<span class="bk-liquid__effect"></span>
<span class="bk-liquid__tint"></span>
<span class="bk-liquid__shine"></span>
<div class="bk-liquid__content">
<div
class="bk-liquid__orbit"
aria-hidden="true"
>
<span class="bk-liquid__orbit-ring"></span>
<span class="bk-liquid__orbit-ring bk-liquid__orbit-ring--mid"></span>
<span class="bk-liquid__orbit-ring bk-liquid__orbit-ring--small"></span>
<span class="bk-liquid__orbit-dot"></span>
<span class="bk-liquid__orbit-dot bk-liquid__orbit-dot--two"></span>
</div>
</div>
</div>
</div>
<!-- SVG-фильтр преломления -->
<svg
class="bk-liquid__svg"
aria-hidden="true"
>
<defs>
<filter
id="bk-liquid-distortion"
x="-20%"
y="-20%"
width="140%"
height="140%"
color-interpolation-filters="sRGB"
>
<feTurbulence
type="fractalNoise"
baseFrequency="0.01 0.01"
numOctaves="1"
seed="5"
result="noise"
/>
<feGaussianBlur
in="noise"
stdDeviation="3"
result="softNoise"
/>
<feDisplacementMap
in="SourceGraphic"
in2="softNoise"
scale="55"
xChannelSelector="R"
yChannelSelector="G"
/>
</filter>
</defs>
</svg>
</div>
</div>
<style>
/* =========================================================
ОСНОВНЫЕ НАСТРОЙКИ — МЕНЯТЬ ЗДЕСЬ
========================================================= */
.bk-liquid-demo {
--bk-glass-bg-image:
url("https://static.tildacdn.com/tild6232-6461-4231-b235-353066613037/Untitled_design_10_1.png");
--bk-glass-text: #111111;
--bk-glass-tint: rgba(255, 255, 255, 0.16);
--bk-glass-blur: 14px;
--bk-glass-radius: 32px;
--bk-glass-gap: 18px;
--bk-glass-motion:
0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden;
color: var(--bk-glass-text);
font-family:
"TildaSans",
"Inter",
Arial,
sans-serif;
background-image:
var(--bk-glass-bg-image);
background-size: cover;
background-position: center;
background-repeat: repeat;
animation:
bk-liquid-background
60s
linear
infinite;
}
.bk-liquid-demo,
.bk-liquid-demo * {
box-sizing: border-box;
}
/* =========================================================
КОНТЕЙНЕР
========================================================= */
.bk-liquid__container {
position: relative;
z-index: 1;
width: min(980px, calc(100% - 40px));
margin: 0 auto;
padding: 120px 0;
display: flex;
flex-direction: column;
gap: var(--bk-glass-gap);
}
/* =========================================================
БАЗОВОЕ СТЕКЛО
========================================================= */
.bk-liquid__glass {
position: relative;
isolation: isolate;
display: flex;
overflow: hidden;
color: var(--bk-glass-text);
border:
1px solid
rgba(255, 255, 255, 0.46);
border-radius:
var(--bk-glass-radius);
background:
rgba(255, 255, 255, 0.06);
box-shadow:
0 12px 34px rgba(0, 0, 0, 0.12),
0 3px 8px rgba(0, 0, 0, 0.06),
inset 1px 1px 0 rgba(255, 255, 255, 0.62),
inset -1px -1px 0 rgba(255, 255, 255, 0.18);
transition:
transform var(--bk-glass-motion),
border-radius var(--bk-glass-motion),
box-shadow var(--bk-glass-motion);
}
.bk-liquid__effect,
.bk-liquid__tint,
.bk-liquid__shine {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.bk-liquid__effect {
z-index: 0;
background:
rgba(255, 255, 255, 0.02);
-webkit-backdrop-filter:
blur(var(--bk-glass-blur))
saturate(145%);
backdrop-filter:
blur(var(--bk-glass-blur))
saturate(145%);
filter:
url("#bk-liquid-distortion");
}
.bk-liquid__tint {
z-index: 1;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.30) 0%,
var(--bk-glass-tint) 44%,
rgba(255, 255, 255, 0.07) 100%
);
}
.bk-liquid__shine {
z-index: 2;
box-shadow:
inset 2px 2px 1px
rgba(255, 255, 255, 0.55),
inset -1px -1px 1px
rgba(255, 255, 255, 0.28);
}
.bk-liquid__shine::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.27) 0%,
rgba(255, 255, 255, 0.09) 20%,
transparent 56%
);
}
.bk-liquid__content {
position: relative;
z-index: 3;
width: 100%;
}
/* =========================================================
HOVER
========================================================= */
@media (hover: hover) {
.bk-liquid__glass:hover {
transform:
translateY(-3px)
scale(1.008);
border-radius:
calc(var(--bk-glass-radius) + 4px);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.15),
0 5px 12px rgba(0, 0, 0, 0.07),
inset 2px 2px 1px rgba(255, 255, 255, 0.7),
inset -1px -1px 1px rgba(255, 255, 255, 0.24);
}
}
/* =========================================================
ОСНОВНАЯ КАРТОЧКА
========================================================= */
.bk-liquid__intro {
width: 100%;
padding:
clamp(30px, 5vw, 54px);
}
.bk-liquid__title {
max-width: 820px;
margin: 0;
font-size:
clamp(34px, 4.5vw, 58px);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.04em;
}
.bk-liquid__text {
max-width: 660px;
margin:
24px 0 0;
font-size:
clamp(17px, 1.6vw, 21px);
line-height: 1.5;
}
.bk-liquid__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
/* =========================================================
КНОПКА
========================================================= */
.bk-liquid__button-link,
.bk-liquid__logo-link {
display: block;
color: inherit;
text-decoration: none;
}
.bk-liquid__button {
min-height: 68px;
align-items: center;
padding:
0 26px;
border-radius: 22px;
}
.bk-liquid__button .bk-liquid__content {
font-size: 16px;
font-weight: 600;
white-space: nowrap;
}
/* =========================================================
ЛОГОТИП
========================================================= */
.bk-liquid__logo-card {
min-width: 180px;
min-height: 68px;
align-items: center;
padding:
15px 24px;
border-radius: 22px;
}
.bk-liquid__logo-card .bk-liquid__content {
display: flex;
align-items: center;
justify-content: center;
}
.bk-liquid__logo-card img {
display: block;
width: auto;
max-width: 150px;
height: 34px;
object-fit: contain;
}
/* =========================================================
СЕТКА UI
========================================================= */
.bk-liquid__ui-grid {
display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));
gap:
var(--bk-glass-gap);
}
.bk-liquid__card {
min-height: 140px;
}
.bk-liquid__card .bk-liquid__content {
min-height: 140px;
padding: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.bk-liquid__card--volume {
grid-column: span 4;
}
.bk-liquid__card--slider {
grid-column: span 5;
}
.bk-liquid__card--toggle {
grid-column: span 3;
}
.bk-liquid__card--knob,
.bk-liquid__card--spinner,
.bk-liquid__card--orbit {
grid-column: span 4;
min-height: 170px;
}
.bk-liquid__card--knob .bk-liquid__content,
.bk-liquid__card--spinner .bk-liquid__content,
.bk-liquid__card--orbit .bk-liquid__content {
min-height: 170px;
}
/* =========================================================
КНОПКИ + ИНДИКАТОР
========================================================= */
.bk-liquid__volume {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.bk-liquid__square-button {
position: relative;
width: 56px;
height: 56px;
flex: 0 0 56px;
padding: 0;
border: 0;
border-radius: 18px;
cursor: pointer;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.30),
rgba(255, 255, 255, 0.10)
);
box-shadow:
inset 2px 2px 1px rgba(255, 255, 255, 0.5),
inset -1px -1px 1px rgba(255, 255, 255, 0.2),
0 6px 14px rgba(0, 0, 0, 0.08);
transition:
transform 0.2s ease;
}
.bk-liquid__square-button:active {
transform:
scale(0.94);
}
.bk-liquid__square-button--minus::before,
.bk-liquid__square-button--plus::before,
.bk-liquid__square-button--plus::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
border-radius: 999px;
background:
currentColor;
transform:
translate(-50%, -50%);
}
.bk-liquid__square-button--minus::before,
.bk-liquid__square-button--plus::before {
width: 20px;
height: 2px;
}
.bk-liquid__square-button--plus::after {
width: 2px;
height: 20px;
}
.bk-liquid__volume-bar {
position: relative;
flex: 1;
max-width: 150px;
height: 16px;
overflow: hidden;
border-radius: 999px;
background:
rgba(255, 255, 255, 0.15);
box-shadow:
inset 1px 1px 1px
rgba(255, 255, 255, 0.35);
}
.bk-liquid__volume-bar::after {
content: "";
position: absolute;
inset:
0 auto 0 0;
width: 58%;
border-radius: inherit;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.75),
rgba(255, 255, 255, 0.32)
);
animation:
bk-liquid-bar
3.6s
ease-in-out
infinite
alternate;
}
/* =========================================================
RANGE
========================================================= */
.bk-liquid__range {
--bk-range-fill: 58%;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 16px;
margin: 0;
border: 0;
border-radius: 999px;
outline: none;
cursor: pointer;
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.62) 0%,
rgba(255, 255, 255, 0.38)
var(--bk-range-fill),
rgba(255, 255, 255, 0.13)
var(--bk-range-fill),
rgba(255, 255, 255, 0.13) 100%
);
}
.bk-liquid__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
rgba(255, 255, 255, 0.96),
rgba(255, 255, 255, 0.54) 58%,
rgba(255, 255, 255, 0.24)
);
box-shadow:
0 7px 18px
rgba(0, 0, 0, 0.1);
}
.bk-liquid__range::-moz-range-thumb {
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.72);
}
/* =========================================================
SWITCH
========================================================= */
.bk-liquid__switch {
position: relative;
display: inline-block;
width: 84px;
height: 48px;
}
.bk-liquid__switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bk-liquid__switch-track {
position: absolute;
inset: 0;
border-radius: 999px;
background:
rgba(255, 255, 255, 0.15);
box-shadow:
inset 2px 2px 1px
rgba(255, 255, 255, 0.45),
0 5px 14px
rgba(0, 0, 0, 0.08);
}
.bk-liquid__switch-thumb {
position: absolute;
top: 5px;
left: 5px;
width: 38px;
height: 38px;
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
rgba(255, 255, 255, 0.98),
rgba(255, 255, 255, 0.55) 58%,
rgba(255, 255, 255, 0.25)
);
box-shadow:
0 7px 16px
rgba(0, 0, 0, 0.1);
transition:
transform 0.25s ease;
}
.bk-liquid__switch
input:checked
+
.bk-liquid__switch-track
.bk-liquid__switch-thumb {
transform:
translateX(36px);
}
/* =========================================================
KNOB
========================================================= */
.bk-liquid__knob {
--bk-knob-rotation: -36deg;
position: relative;
width: 100px;
height: 100px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
background:
radial-gradient(
circle at 35% 28%,
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0.13) 75%
);
box-shadow:
inset 2px 2px 1px
rgba(255, 255, 255, 0.82),
0 10px 24px
rgba(0, 0, 0, 0.1);
transform:
rotate(var(--bk-knob-rotation));
transition:
transform 0.28s ease;
}
.bk-liquid__knob::before {
content: "";
position: absolute;
top: 12px;
left: 50%;
width: 7px;
height: 23px;
margin-left: -3.5px;
border-radius: 999px;
background:
rgba(17, 17, 17, 0.76);
}
/* =========================================================
SPINNER
========================================================= */
.bk-liquid__spinner {
position: relative;
width: 104px;
height: 104px;
}
.bk-liquid__spinner-ring {
position: absolute;
inset: 0;
border:
7px solid
rgba(255, 255, 255, 0.13);
border-top-color:
rgba(255, 255, 255, 0.94);
border-right-color:
rgba(255, 255, 255, 0.52);
border-radius: 50%;
animation:
bk-liquid-spin
3.4s
linear
infinite;
}
.bk-liquid__spinner-ring--inner {
inset: 18px;
border-width: 5px;
animation-duration: 2.6s;
animation-direction: reverse;
}
.bk-liquid__spinner-core {
position: absolute;
inset: 35px;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.26);
}
/* =========================================================
ORBIT
========================================================= */
.bk-liquid__orbit {
position: relative;
width: 124px;
height: 124px;
}
.bk-liquid__orbit-ring {
position: absolute;
inset: 0;
border:
1px solid
rgba(255, 255, 255, 0.29);
border-radius: 50%;
}
.bk-liquid__orbit-ring--mid {
inset: 16px;
}
.bk-liquid__orbit-ring--small {
inset: 34px;
}
.bk-liquid__orbit-dot {
position: absolute;
top: -8px;
left: 50%;
width: 16px;
height: 16px;
margin-left: -8px;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.82);
transform-origin:
8px 70px;
animation:
bk-liquid-orbit-one
5.4s
linear
infinite;
}
.bk-liquid__orbit-dot--two {
top: 8px;
width: 12px;
height: 12px;
margin-left: -6px;
transform-origin:
6px 46px;
animation:
bk-liquid-orbit-two
3.8s
linear
infinite
reverse;
}
/* =========================================================
SVG
========================================================= */
.bk-liquid__svg {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
/* =========================================================
АНИМАЦИИ
========================================================= */
@keyframes bk-liquid-background {
from {
background-position:
center 0;
}
to {
background-position:
center -800px;
}
}
@keyframes bk-liquid-spin {
from {
transform:
rotate(0deg);
}
to {
transform:
rotate(360deg);
}
}
@keyframes bk-liquid-bar {
from {
width: 42%;
}
to {
width: 72%;
}
}
@keyframes bk-liquid-orbit-one {
from {
transform:
rotate(0deg);
}
to {
transform:
rotate(360deg);
}
}
@keyframes bk-liquid-orbit-two {
from {
transform:
rotate(0deg);
}
to {
transform:
rotate(360deg);
}
}
/* =========================================================
ПЛАНШЕТ
========================================================= */
@media (max-width: 900px) {
.bk-liquid__card--volume {
grid-column: span 5;
}
.bk-liquid__card--slider {
grid-column: span 7;
}
.bk-liquid__card--toggle,
.bk-liquid__card--knob,
.bk-liquid__card--spinner,
.bk-liquid__card--orbit {
grid-column: span 4;
}
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media (max-width: 640px) {
.bk-liquid-demo {
--bk-glass-radius: 24px;
--bk-glass-gap: 12px;
min-height: auto;
}
.bk-liquid__container {
width:
calc(100% - 20px);
padding:
30px 0;
}
.bk-liquid__intro {
padding:
26px 22px;
}
.bk-liquid__title {
font-size:
clamp(30px, 10vw, 42px);
}
.bk-liquid__text {
margin-top: 18px;
font-size: 16px;
}
.bk-liquid__actions {
flex-direction: column;
margin-top: 24px;
}
.bk-liquid__button-link,
.bk-liquid__logo-link,
.bk-liquid__button,
.bk-liquid__logo-card {
width: 100%;
}
.bk-liquid__ui-grid {
grid-template-columns: 1fr;
gap:
var(--bk-glass-gap);
}
.bk-liquid__card--volume,
.bk-liquid__card--slider,
.bk-liquid__card--toggle,
.bk-liquid__card--knob,
.bk-liquid__card--spinner,
.bk-liquid__card--orbit {
grid-column: auto;
}
.bk-liquid__card,
.bk-liquid__card .bk-liquid__content {
min-height: 100px;
}
.bk-liquid__card--knob,
.bk-liquid__card--spinner,
.bk-liquid__card--orbit,
.bk-liquid__card--knob .bk-liquid__content,
.bk-liquid__card--spinner .bk-liquid__content,
.bk-liquid__card--orbit .bk-liquid__content {
min-height: 120px;
}
.bk-liquid__square-button {
width: 44px;
height: 44px;
flex-basis: 44px;
border-radius: 14px;
}
.bk-liquid__knob {
width: 74px;
height: 74px;
}
.bk-liquid__spinner {
width: 78px;
height: 78px;
}
.bk-liquid__spinner-ring {
border-width: 5px;
}
.bk-liquid__spinner-ring--inner {
inset: 14px;
border-width: 4px;
}
.bk-liquid__spinner-core {
inset: 27px;
}
.bk-liquid__orbit {
width: 88px;
height: 88px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.bk-liquid-demo,
.bk-liquid__spinner-ring,
.bk-liquid__volume-bar::after,
.bk-liquid__orbit-dot {
animation: none;
}
.bk-liquid__glass,
.bk-liquid__knob,
.bk-liquid__switch-thumb {
transition: none;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
document
.querySelectorAll(".bk-liquid-demo")
.forEach(function (demo) {
/* Слайдер */
demo
.querySelectorAll(".bk-liquid__range")
.forEach(function (range) {
function updateRange() {
range.style.setProperty(
"--bk-range-fill",
range.value + "%"
);
}
range.addEventListener(
"input",
updateRange
);
updateRange();
});
/* Поворотная ручка */
demo
.querySelectorAll(".bk-liquid__knob")
.forEach(function (knob) {
const steps = [
-36,
-10,
18,
46
];
let currentStep = 0;
knob.addEventListener(
"click",
function () {
currentStep =
(currentStep + 1)
% steps.length;
knob.style.setProperty(
"--bk-knob-rotation",
steps[currentStep] + "deg"
);
}
);
});
});
});
</script>
