Волшебное использование переменных CSS, чтобы сделать ваш CSS более захватывающим

автор:JowayYoung
склад:Github,CodePen
Блог:Официальный сайт,Наггетс,думаю нет,Знай почти
Нет публики:Интерфейс IQ
Специальное заявление: Нелегко быть оригинальным, и перепечатка или плагиат не допускаются без разрешения.Если вам нужно перепечатать, вы можете связаться с автором для получения разрешения.

предисловие

CSS-переменныеон жеПользовательские свойства CSSПочему вы вдруг упомяну об этом очень мало, чтобы использовать? Потому что недавно реконструировав личный официальный сайт, я не знаю, почему я вдруг люблю его.CSS-переменные, может быть, его собственное скрытое очарование заставляет автора восхищаться им.

Когда дело доходит до того, почему переменные используются в CSS, давайте возьмем каштан, и предполагается, что все поймут с первого взгляда.

/* 不使用CSS变量 */
.title {
    background-color: red;
}
.desc {
    background-color: red;
}

/* 使用CSS变量 */
:root {
    --bg-color: red;
}
.title {
    background-color: var(--bg-color);
}
.desc {
    background-color: var(--bg-color);
}

После прочтения может возникнуть желание использоватьCSS-переменныеОбъем кода немного больше, но вы когда-нибудь думали, что однажды злобный планировщик и дизайнер сказали, что хотят сделать функцию скина. В соответствии с обычным образом мышления предполагается, что некоторые студенты будут следовать默认颜色主题добавить элемент управления新颜色主题CSS-файл. Очень сложно поддерживать несколько наборов цветов темы одновременно каждый раз, когда добавляется новое требование.

В настоящее времяCSS-переменныеЭто удобно Я заранее стандартизирую различные цвета, которые необходимо изменить, с дизайнером и передамCSS-переменныеОпределите и обработайте их в пакетном режиме через JSCSS-переменныеВот и все. Это тожеИзменить цвета темыПреимущество одного из решений заключается в том, что вам нужно написать только один набор кода CSS.

["red", "blue", "green"].forEach(v => {
    const btn = document.getElementById(`${v}-theme-btn`);
    btn.addEventListener("click", () => document.body.style.setProperty("--bg-color", v));
});

Вот краткое изложение преимуществ использования переменных в CSS:

Уменьшите дублирование кода стиля
Увеличьте расширяемость кода стиля
Повышение гибкости кода стилей
Добавьте метод связи между CSS и JS.
Изменение стиля без глубокого обхода DOM

Некоторые студенты могут спросить, Sass и Less уже реализовали функцию переменных, так зачем беспокоиться. Но подумайте об этом,CSS-переменныеСравнивая переменные Sass и Less, у него есть свои преимущества.

Собственные функции браузера, можно запускать напрямую без перевода
Член объекта DOM, что значительно облегчает связь между CSS и JS.

знать

Я собирался рассказать о половине этогоCSS-переменныеСпецификация и использование , но после долгих поисков в Интернете я почувствовал, что это не нужно, поэтому я опубликовал руководство, написанное г-ном Руаном Ифэном.«Учебник по CSS-переменным». В то же время автор такжеCSS-переменныеДетали организованы в месте, чтобы каждый помнил.

утверждение:--变量名
Читать:var(--变量名, 默认值)
Типы
- Обычный: может использоваться только как属性值нельзя использовать как属性名
- Персонажи: строковое конкатенация"Hello, "var(--name)
- Значение: использоватьcalc()Используется с числовыми единицамиvar(--width) * 10px
объем
- Область применения: в当前元素块作用域а также子元素块作用域действителен в соответствии с
- Приоритет:内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

Затем используйте несколько специальных сцен, чтобы показатьCSS-переменныеОчарование. Опять таки,У вещи есть сцена использования, она, естественно, будет иметь свою ценность., тогда все больше и больше людей будут его использовать.

сцены, которые будут использоваться

фактическиCSS-переменныеСуществует особенно полезный сценарий, то есть он используется в сочетании со сбором элементов списка. Если вы не понимаете, что это, читайте.

以下所有演示代码基于vue文件，但HTML、CSS和JS分开书写，为了简化CSS的书写而使用Sass进行预处理，方便代码演示

бар загрузки бар

Полоса загрузки в виде полосы обычно состоит из нескольких строк, и каждая строка соответствует одной и той же анимации с разными задержками, и одна и та же анимация запускается через разницу во времени для создания эффекта загрузки. Подсчитано, что большинство учащихся могут написать код CSS следующим образом.

strip-loading

<ul class="strip-loading flex-ct-x">
    <li v-for="v in 6" :key="v"></li>
</ul>

.loading {
    width: 200px;
    height: 200px;
    li {
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1s ease-in-out infinite;
        & + li {
            margin-left: 5px;
        }
        &:nth-child(2) {
            animation-delay: 200ms;
        }
        &:nth-child(3) {
            animation-delay: 400ms;
        }
        &:nth-child(4) {
            animation-delay: 600ms;
        }
        &:nth-child(5) {
            animation-delay: 800ms;
        }
        &:nth-child(6) {
            animation-delay: 1s;
        }
    }
}

Анализ кода показал, что каждый<li>просто существуюanimation-delayДругой, и остальная часть кода точно такая же, если вы замените его другими аналогичными сценариями сбора элементов списка, не будет ли 10<li>просто напиши 10:nth-child.

Очевидно, что этот метод негибок и его непросто инкапсулировать в компоненты, а еще лучше, если бы его можно было инкапсулировать в функцию типа JS и выводить разные стилевые эффекты в зависимости от параметров. Говоря об этом, очевидно, что это проложить путьCSS-переменныенавыки развития.

Для модификации раздела HTML пусть каждый<li>имеет свою область примененияCSS-переменные. Для модификации части CSS необходимо проанализировать, какие свойстваindexПроисходят инкрементные и регулярные изменения, используйте регулярные измененияCSS-переменныевыражение вместо этого.

<ul class="strip-loading flex-ct-x">
    <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
</ul>

.strip-loading {
    width: 200px;
    height: 200px;
    li {
        --time: calc((var(--line-index) - 1) * 200ms);
        border-radius: 3px;
        width: 6px;
        height: 30px;
        background-color: #f66;
        animation: beat 1.5s ease-in-out var(--time) infinite;
        & + li {
            margin-left: 5px;
        }
    }
}

源码链接可在文章结尾处获取

переменные в коде--line-indexа также--timeСделать каждый<li>Имейте область, принадлежащую вашей собственной. Например, второй<li>,--line-indexимеет значение 2,--timeрассчитывается как200ms, заменен на третий<li>Последние два значения снова будут разными.

ЭтоCSS-переменныепо размаху действия (在当前元素块作用域及其子元素块作用域下有效), Таким образом, в.strip-loadingвызывается в области блока--line-indexэто недействительно.

/* flex属性无效 */
.loading {
    display: flex;
    align-items: center;
    flex: var(--line-index);
}

по волшебствуCSS-переменныеа также поместите код CSS из29行сокращено до15行, для тех сцен с большим количеством наборов элементов списка эффект более заметен. Кроме того, это красивее и проще в обслуживании.Однажды было сказано, что разница во времени эффекта загрузки не очевидна, поэтому я прямо поставилcalc((var(--line-index) - 1) * 200ms)внутренний200msприспособиться к400msВот и все. нет необходимости в каждом:nth-child(n)Изменено.

полоса загрузки сердца

Я видел Наггетс некоторое время назад陈大鱼头兄Полоса загрузки в форме сердца очень красивая и вызывает чувство.

heart-loading

При анализе анимации было обнаружено, что цвет фона каждой строки не соответствует задержке анимации, а высота анимации также не соответствует. Если вы будете внимательны, вы также можете обнаружить, что высоты статей 1 и 9 одинаковы, высоты статей 2 и 8 одинаковы и так далее, чтобы получить高度变换相同类Формула:对称index = 总数 + 1 - index.

Цвет фона использует поворот оттенка фильтра.hue-rotateФункция, цель которой сделать переход цвета более естественным; настройка задержки анимации и т.п.条形加载条настройки одинаковые. использовать нижеCSS-переменныеСделайте это в соответствии с анимацией, которую вы видите.

<div class="heart-loading flex-ct-x">
    <ul style="--line-count: 9;">
        <li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li>
    </ul>
</div>

.heart-loading {
    width: 200px;
    height: 200px;
    ul {
        display: flex;
        justify-content: space-between;
        width: 150px;
        height: 10px;
    }
    li {
        --Θ: calc(var(--line-index) / var(--line-count) * .5turn);
        --time: calc((var(--line-index) - 1) * 40ms);
        border-radius: 5px;
        width: 10px;
        height: 10px;
        background-color: #3c9;
        filter: hue-rotate(var(--Θ));
        animation-duration: 1s;
        animation-delay: var(--time);
        animation-iteration-count: infinite;
    }
    .line-1,
    .line-9 {
        animation-name: line-move-1;
    }
    .line-2,
    .line-8 {
        animation-name: line-move-2;
    }
    .line-3,
    .line-7 {
        animation-name: line-move-3;
    }
    .line-4,
    .line-6 {
        animation-name: line-move-4;
    }
    .line-5 {
        animation-name: line-move-5;
    }
}

源码链接可在文章结尾处获取

После волны эксплуатации будет получен следующий эффект. а также陈大鱼头兄По сравнению с загрузочной полосой в форме сердца цвет, кривая волны и частота биения немного отличаются.Под распространением теплых тонов и всплеском адреналина это ощущение сердцебиения. Напоминает мне стихотворение, которое я когда-то написал:我见犹怜，爱不释手，雅俗共赏，君子好逑.

heart-loading

Панель навигации с вкладками

Вышесказанное демонстрирует две панели загрузкиCSS-переменныеИспользование CSS и некоторые фокусы теперь демонстрируются через панель навигации с вкладками.CSS-переменныеИспользовать в JS.

В JS есть три основные операцииCSS-переменныеAPI выглядит простым и легко запоминающимся:

Чтение переменной:elem.style.getPropertyValue()
Установить переменные:elem.style.setProperty()
Удалить переменные:elem.style.removeProperty()

Сначала на карте эффекта в основном используется эффектCSS-переменныеОтметьте цвет фона каждой вкладки и переключите состояние отображения вкладки.

tab-navbar

<div class="tab-navbar">
    <nav>
        <a v-for="(v, i) in list" :key="v" :class="{ active: index === i }" @click="select(i)">标题{{i + 1}}</a>
    </nav>
    <div>
        <ul ref="tabs" :style="`--tab-count: ${list.length}`">
            <li v-for="(v, i) in list" :key="v" :style="`--bg-color: ${v}`">内容{{i + 1}}</li>
        </ul>
    </div>
</div>

.tab-navbar {
    display: flex;
    overflow: hidden;
    flex-direction: column-reverse;
    border-radius: 10px;
    width: 300px;
    height: 400px;
    nav {
        display: flex;
        height: 40px;
        background-color: #f0f0f0;
        line-height: 40px;
        text-align: center;
        a {
            flex: 1;
            cursor: pointer;
            transition: all 300ms;
            &.active {
                background-color: #66f;
                font-weight: bold;
                color: #fff;
            }
        }
    }
    div {
        flex: 1;
        ul {
            --tab-index: 0;
            --tab-width: calc(var(--tab-count) * 100%);
            --tab-move: calc(var(--tab-index) / var(--tab-count) * -100%);
            display: flex;
            flex-wrap: nowrap;
            width: var(--tab-width);
            height: 100%;
            transform: translate3d(var(--tab-move), 0, 0);
            transition: all 300ms;
        }
        li {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;
            background-color: var(--bg-color);
            font-weight: bold;
            font-size: 20px;
            color: #fff;
        }
    }
}

export default {
    data() {
        return {
            index: 0,
            list: ["#f66", "#09f", "#3c9"]
        };
    },
    methods: {
        select(i) {
            this.index = i;
            this.$refs.tabs.style.setProperty("--tab-index", i);
        }
    }
};

源码链接可在文章结尾处获取

существует<ul>определено выше--tab-indexУказывает текущий индекс вкладки, сбрасывается при нажатии кнопки--tab-indexзначение, вы можете перемещать, не манипулируя DOM<ul>Указанная вкладка отображается в позиции. Перемещаемый без манипулирования DOM<ul>потому что это определяет--tab-move,пройти черезcalc()рассчитать--tab-indexа также--tab-moveотношения, тем самым контролируяtransform: translate3d()двигаться<ul>.

Также в<li>определено выше--bg-colorУказывает цвет фона вкладки, что также является относительно кратким методом назначения шаблона, который лучше, чем запись<li :style="backgroundColor: ${color}">Будьте милы. Если несколько свойств CSS зависят от назначения переменной, используйтеCSS-переменныеУдобнее назначать значения стилям.Эти свойства CSS можно рассчитать и назначить в файлах CSS, что может помочь JS разделить часть работы по вычислению атрибутов.

Конечно, эту панель навигации по вкладкам можно реализовать и с помощью чистого CSS.Заинтересованные студенты могут прочитать статью в предыдущей статье автора.Панель навигации с вкладками на чистом CSS.

Плавающая кнопка отслеживания

Практикуется через несколько каштановCSS-переменныеЯ считаю, что в применении CSS и JS все освоили их использование и навыки. Я видел классный эффект наведения мыши на веб-сайте раньше, и, похоже, он используетCSS-переменныеосуществленный. Автор также использует по памятиCSS-переменныеСделай это.

На самом деле идея относительно проста, сначала разметьте и раскрасьте кнопки, а затем используйте псевдоэлементы, чтобы отметить положение мыши, определить--xа также--yПредставляет координаты псевдоэлемента в кнопке и получает мышь на кнопке через JSoffsetLeftа такжеoffsetLeftназначить на--xа также--y, а затем добавьте фоновый цвет радиального градиента к псевдоэлементу, и все готово.Родится классный эффект отслеживания наведения мыши.

track-btn

<a class="track-btn pr tac" @mousemove="move">
    <span>妙用CSS变量，让你的CSS变得更心动</span>
</a>

.track-btn {
    display: block;
    overflow: hidden;
    border-radius: 100px;
    width: 400px;
    height: 50px;
    background-color: #66f;
    line-height: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #fff;
    span {
        position: relative;
    }
    &::before {
        --size: 0;
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: var(--size);
        height: var(--size);
        background-image: radial-gradient(circle closest-side, #09f, transparent);
        content: "";
        transform: translate3d(-50%, -50%, 0);
        transition: all 200ms ease;
    }
    &:hover::before {
        --size: 400px;
    }
}

export default {
    name: "track-btn",
    methods: {
        move(e) {
            const x = e.pageX - e.target.offsetLeft;
            const y = e.pageY - e.target.offsetTop;
            e.target.style.setProperty("--x", `${x}px`);
            e.target.style.setProperty("--y", `${y}px`);
        }
    }
};

源码链接可在文章结尾处获取

На самом деле, его можно комбинировать с событиями мыши для получения более крутых эффектов, таких как动画关联,事件响应и так далее. Не невозможно, просто подумайте, наслаждайтесь своим воображением, друзья.

Я также видел очень хороший каштан на CodePen раньше,Плавающая кнопка параллакса, конкретный код включает в себя некоторые знания о трехмерном преобразовании. Прочитав исходный код, я буду реализовывать его сам по его идеям, кстати, я немного улучшу код и инкапсулирую его в компонент Vue, который будет храниться в примере кода этого курса. Я чувствую, что записанный GIF-файл немного неудобен, а эффект отображения не очень хорош Заинтересованные студенты могут загрузить пример кода этого учебного программного обеспечения и запустить его, чтобы увидеть эффект.

parallax-btn

совместимый

Для современных браузеровCSS-переменныеСовместимость на самом деле неплохая, поэтому каждый может с уверенностью ее использовать. В конце концов, сейчас для крупных производителей браузеров настало время быстрых итераций, и на продукты приходится большая часть пользовательского опыта, поэтому, если позволяют условия, по-прежнему смело пробовать что-то новое и не ограничиваться чем-то таким. -называемые нормами в прошлом.

caniuse-css-var

Сколько людей по-прежнему готовы поддерживать совместимость IE6~IE9, если пользовательский опыт продукта ограничен подавлением старых браузеров (可能政务Web应用和金融Web应用除外吧), я считаю, что этот продукт не пойдет очень далеко.

В процессе завершения продукта мы должны не только выполнить рабочую задачу, если мы можем подумать об украшении, обеспечивая при этом прогресс, могут быть неожиданные выгоды.Написание каждого фрагмента кода с душой — вот истинное значение получения удовольствия от написания кода..

Суммировать

Эта статья рассматривается в пошаговой манереCSS-переменныеКонечно, нельзя отказываться от такой полезной функции. На самом деле, если подумать, можноCSS-переменныеИспользуется во многих сценариях. Автор объединил примеры, упомянутые в этой статье, в демоверсию, что также удобно для заинтересованных студентов, чтобы изучить пример кода курсовой и подумать над некоторыми деталями, которые, возможно, не были замечены при чтении этой статьи.

Демонстрационный пример:条形加载条,心形加载条,标签导航栏,悬浮跟踪按钮,悬浮视差按钮
Демонстрационный адрес: следоватьIQ前端,сканирование文章底部二维码, фоновый ответ变量,ПолучатьВесь набор примеров кода курсовой работы
Демо-беги: внутриreadme.htmlПодробное описание, не забудьте увидеть 喔

В конце сочинения я подарю вам большое пасхальное яйцо, радужного цвета согревающего душу 🌈 с кнопочкой любви. Если вы считаете, что эта статья хорошо написана, пожалуйста, поставьте автору лайк, как показано ниже. Конечно, исходный код пасхального яйца также находится в образце кода учебного курса. Если вы хотите узнать больше о навыках разработки CSS, вы можете перейти к статье, написанной автором в 2019 году.9.2万阅读量горячая статья«Гибкое использование навыков разработки CSS (66 кейсов Sao)», гарантированно удовлетворит ваши глазные яблоки.

like-btn

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность это не просто, поощряйте автора к созданию более качественных статей

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана

Ответить после подписки资料Получите бесплатные учебные материалы
Ответить после подписки进群Втяните вас в группу технического обмена
Добро пожаловать, чтобы следоватьIQ前端,БолееНавыки разработки на CSS/JSНажимайте только на публичный аккаунт