В этой статье будет представлена очень интересная функция, использующая чистый CSS для использования изменения размера для достижения мощной функции предварительного просмотра переключения изображений. Что-то вроде этого:
идеи
Прежде всего, для достижения такого эффекта на самом деле есть много способов, если вам не требуется перетаскивание.
- наложить две картинки вместе
- Измените ширину верхнего изображения или используйте маску, чтобы изменить интервал прозрачности маски.
Оба способа просты для иллюстрации.
Предположим, что наша структура выглядит следующим образом, используяbackground
Покажите две картинки:
<div class="g-outer">
<div class="g-inner"></div>
</div>
Способ 1, способ изменить ширину верхнего изображения:
.g-outer {
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
height: 340px;
background: url(image2.png);
animation: widthchange 3s infinite alternate linear;
}
@keyframes widthchange {
0% {
width: 650px;
}
100% {
width: 0px;
}
}
Эффект следующий:
Конечно, используяmask
Методом маскировки тоже очень легко добиться подобного эффекта:
.g-outer {
background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);
}
.g-inner {
background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);
mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
mask-size: 200% 100%;
animation: maskChange 2s infinite alternate linear;
}
@keyframes maskChange {
0% {
mask-position: -100% 0;
}
100% {
mask-position: 0 0;
}
}
Вы также можете получить тот же эффект:
Полный код для приведенного выше DEMO:CodePen Demo -- Switch Picture
Я не очень разбираюсь в мощном атрибуте маски, так что можете сильно ткнуть:Фантастическая МАСКА CSS
Перетащите, используя изменение размера
Следующий шаг — самый важный и важный — разумное использование CSS.resize
Атрибут, реализующий ширину элемента управления перетаскиванием.
чтоresize
?
resize
: Это свойство позволяет вам контролировать размер элемента.
Синтаксис следующий:
{
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
}
Взгляните на простейшую демонстрацию:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>
p {
width: 200px;
height: 200px;
resize: horizontal;
overflow: scroll;
}
Здесь мы устанавливаем длину и ширину200px
из<p>
Изменить ширину для горизонтального перетаскивания. Эффект следующий:
Краткое изложение некоторых советов:
-
resize
для вступления в силу необходимо сотрудничатьoverflow: scroll
. Конечно, правильно сказать, чтоoverflow
нетvisible
или может воздействовать непосредственно на замещающие элементы, такие как изображения,<video>
а также<iframe>
,<textarea>
Ждать - мы можем пройти
resize
изhorizontal
,vertical
,both
установить горизонтальное перетаскивание, вертикальное перетаскивание, горизонтальное и вертикальное перетаскивание - совместим с контейнером
max-width
,min-width
,max-height
,min-height
Ограничьте диапазон перетаскиваемых изменений
Применить изменение размера к переключению перетаскивания изображения
Хорошо, далее мы применим изменение размера к переключению перетаскиванием изображения.
Прежде всего, по-прежнему приведенный выше код, давайте попробуем изменить размер дочерних элементов:
<div class="g-outer">
<div class="g-inner width-change"></div>
</div>
.g-outer {
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
height: 340px;
background: url(image2.png);
resize: horizontal;
overflow: scroll;
max-width: 640px;
min-width: 10px;
}
можно увидеть,g-inner
уже настроенresize: horizontal
, будет разрешено перетаскивать по горизонтали, фактический эффект будет следующим:
Ну, это очень близко, потому что нужно сотрудничатьoverflow: scroll
, так что есть раздражающие полосы прокрутки, очень неприглядные, мы должны найти способ избавиться от полос прокрутки.
Скрыть полосы прокрутки с еще одним уровнем вложенности и абсолютным позиционированием
Есть много способов скрыть полосу прокрутки, здесь мы представляем один из хитрых способов, вносим некоторые изменения в нашу структуру, а затем накладываем еще один слой div:
<div class="g-outer">
<div class="g-inner">
<div class="g-resize"></div>
</div>
</div>
Мы будем управлять функцией перетаскивания, чтобыg-resize
, который отвечает за изменение ширины элемента, аg-inner
к абсолютному позиционированию, когдаg-resize
по мере увеличения его ширины его родительский элементg-inner
также будет соответственно увеличиваться, и, наконец, установитьg-resize
изopacity
Установите 0, чтобы скрыть полосы прокрутки.
Основной код выглядит следующим образом:
.g-outer {
position: relative;
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
position: absolute;
top: 0;
left: 0;
min-width: 0;
max-width: 650px;
height: 340px;
background-image: url(image2.png);
}
.g-resize {
position: relative;
resize: horizontal;
overflow: scroll;
width: 0;
height: 340px;
max-width: 650px;
min-width: 15px;
animation: opacityChange 3s infinite alternate linear;
}
@keyframes opacityChange {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Здесь для удобства яopacity
Анимационный эффект затухания и затухания установлен для легкой индикации:
Показать полосу перетаскивания с псевдоэлементом
На последнем шаге, поскольку полоса прокрутки полностью скрыта, пользователь не знает, что ее можно перетаскивать, поэтому нам также нужно нарисовать более красивую полосу перетаскивания.Здесь мы продолжаем приведенный выше макет и даем.g-inner
Добавьте еще один псевдоэлемент, абсолютно расположенный в конце элемента:
.g-inner:before {
content: "↔";
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
right: 0;
height: 100%;
line-height: 340px;
}
Окончательный результат идеален:
Полный подробный код вы можете найти в моемCSS-вдохновениесм. на:
В заключение
Благодаря этой статье вы можете узнать:
- Используйте resize для управления размером контейнера
- Скрыть неприглядные полосы прокрутки некоторыми хитрыми способами
- И с некоторыми из вышеперечисленных навыков используйте чистый CSS для реализации функции предварительного просмотра перетаскивания изображения.
наконец
Ну вот и конец этой статьи, надеюсь она вам поможет :)
Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄
Другие замечательные эффекты CSS могут следовать за мнойCSS-вдохновение
Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.
Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.