задний план
В последние несколько дней я столкнулся с интерактивным требованием и попросил добиться эффекта, когда мышь перемещается в элемент, на элементе появляется динамическая рамка, как показано на рисунке:
идеи
Когда я увидел этот эффект, первое, о чем я подумал, это установить свойство границы элемента, к сожалению, границу нельзя установить на длину, и динамический эффект не может быть реализован. Другая идея реализации состоит в том, чтобы добавить четыре элемента div для достижения эффекта границы вверх, вниз, влево и вправо соответственно.Хотя это возможно, добавление четырех дополнительных элементов немного потеряно. Нет ли лучшего решения...
Как раз, когда я ломал голову, вдруг появилась идея, а почему бы не попробовать использовать несколько фонов CSS3 для имитации границ, фон можно задавать по длине, а изменяя длину фона, можно добиться нужного динамического эффекта. Идите вперед и сделайте быстрый поиск базовых знаний CSS3 в Интернете.
CSS3 Background
CSS3 дляbackgroundБыли внесены некоторые изменения, наиболее очевидным из которых является использование установки нескольких фонов, которая не только добавляет 4 новых атрибута, но также настраивает и улучшает текущие атрибуты.
1. Несколько фоновых изображений
В CSS3 вы можете применить несколько фоновых изображений к элементу метки. Код аналогичен версии CSS2.0, но эталонные изображения должны быть разделены запятыми. Первое изображение — это фон, расположенный поверх элемента, а последующие фоновые изображения отображаются под ним последовательно, следующим образом:
background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
2. Новое свойство: Фоновый клип
background-clip Как следует из названия, отсечение фона используется для установки того, выходит ли фон элемента (фоновое изображение или цвет) ниже границы.
-
background-clip: border-box;Фон простирается до внешнего края границы (но ниже границы) -
background-clip: padding-box;Фон простирается до внешнего края заполнения. не тянется к границе -
background-clip: content-box;Фон обрезается до внешнего края блока содержимого. -
background-clip: text;Фон обрезается до цвета переднего плана текста (экспериментальный атрибут, необходимо добавить префикс браузера)
3. Новое свойство: Происхождение фона
Это свойство необходимо сочетать сbackground-positionС использованием. ты можешь использовать этоbackground-positionПозиционирование рассчитывается по границе, отступу или области содержимого поля. (аналогичныйbackground-clip)
-
Примечание. При использовании background-attachment как фиксированного это свойство игнорируется и не действует.
-
background-origin：border-box;от границы пограничная позиция -
background-origin：padding-box;с позиции заполнения -
background-origin：content-box;Из положения области содержимого поля содержимого;
4. Новое свойство: Размер фона
Свойство Размер фона используется для установки размера фонового изображения. Есть несколько значений свойств:
-
background-size: contain;Уменьшите фоновое изображение, чтобы оно соответствовало элементу метки (в основном по пикселям) -
background-size: cover;Расширение фонового изображения до размера всего элемента этикетки (в основном по пикселям) -
background-size: 100px 100px;Указывает размер масштабирования фонового изображения. -
background-size: 50% 100%;Процент используется для масштабирования размера изображения в соответствии с размером элемента метки содержимого.
5. Настройка повтора фона
При настройке фона в CSS2 он часто перехватывался элементом label и отображался не полностью.CS3 представил 2 новых свойства для решения этой проблемы.
-
background-repeat: space;Изображения располагаются с одинаковым интервалом и заполняют весь элемент этикетки. -
background-repeat: round;Изображение автоматически масштабируется до тех пор, пока не уместится и не заполнит весь элемент этикетки.
6. Настройка прикрепления фона
Фоновое вложение имеет новое значение свойства:local, он работает только тогда, когда элемент метки прокручивается (как установленоoverflow: scroll;),когдаbackground-attachmentУстановить какscroll, фоновое изображение не прокручивается вместе с полосой прокрутки содержимого. Теперь, сbackground-attachment: local, вы можете сделать так, чтобы фон прокручивался по мере прокрутки содержимого элемента.
7. Добавлен режим наложения фонаРежимы наложения фона — это методы, которые вычисляют окончательное значение цвета пикселя при перекрытии фона, каждый режим наложения принимает значения цвета переднего плана и фона (соответственно верхний и нижний цвета), выполняет свой расчет и возвращает значение цвета. . Окончательный видимый слой является результатом вычисления режима наложения для каждого перекрывающегося пикселя в слое наложения.background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;
Для каждого эффекта смешивания см.:developer.Mozilla.org/en-US/docs/…
Граница аналогового элемента CSS3 с несколькими фонами
Здесь мы в основном используемbackground-img,background-sizeа такжеbackground-positionтри свойства.
background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];
Краткая форма выглядит следующим образом:
background: [background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat],
[background-image] [background-position] [background-repeat];
Теперь мы используем несколько фонов для имитации границы элемента.
/*CSS*/
.exammple {
background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
background-position: left top, right top, right bottom, left bottom;
}
<div class="exammple"></div>
Мы используем четыре градиентных фона для имитации четырех границ (почему мы используем градиенты вместо прямого цвета? Это потому, что несколько фонов CSS могут быть толькоbackground-image,background-colorМножественные значения не поддерживаются, поэтому мы можем использовать только градиенты даже для сплошных границ).
Далее мы делаем границу движения
/*CSS*/
.exammple {
transition: ease-in .3s;
background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
background-position: left top, right top, right bottom, left bottom;
}
.exammple:hover {
background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
Теперь мы добились необходимого эффекта взаимодействия.
Суммировать
По сравнению со свойством границы имитация границы с фоном имеет следующие преимущества и недостатки.
| Преимущество | недостаток |
|---|---|
| Он может контролировать ширину и высоту, цвет градиента, направление движения и т. д. Он гибкий и изменчивый, и может достигать многих эффектов, которых невозможно достичь без добавления дополнительных элементов. | Не удается получить закругленные углы границ |
должен быть в курсеГраница, имитируемая фоном, не совпадает с реальной границей. Она не занимает ширину и высоту границы. Будьте внимательны при расчете блочной модели.
наконец
Благодаря дальнейшему обогащению свойств фона с помощью CSS3, использование нескольких фонов в CSS3 позволяет достичь многих эффектов, которые ранее были возможны только с помощью js или изображений, таких как полупрозрачный фон, фон с геометрическим узором, полосатый фон и т. д. Я с нетерпением жду изучаем CSS вместе с вами.
насчет нас
Передовая команда Kuaigou Taxi занимается обменом передовыми технологиями и регулярно публикует высококачественные статьи. Добро пожаловать, обратите внимание и лайкните.