[Шэньчжэнь] Интернет-команда DJI набирает на фронт и большое количество позиций (внутреннее продвижение 15-50k + богатый конец года + акции) Пожалуйста, присылайте свое резюме наevan.zhou@dji.com, При необходимости ответьте в тот же день и отправьте в тот же день.Больше преимуществ
В этой статье рассказывается о потребностях, с которыми я столкнулся в последнее время, и проблемах, с которыми я столкнулся в процессе их решения, а также получения новых знаний.Опубликовано в w3ctrain
Посмотрите, прежде чем учитьсякрутые анимационные эффекты, подумайте, как этого добиться.
Начав с потребностей, над которыми я работал в последнее время, стиль купона, когда я просматривал проект дизайна, я подумал, что это не имеет большого значения, и я согласился. Когда я действительно начал разрабатывать, я столкнулся с проблемами, в основном из-за того, что способ реализации эффекта долбления был более трудоемким. Требование состоит в том, чтобы фон мог быть сопоставлен, а тело билета могло быть сопоставлено с фоновым изображением, и тогда пустота была бы настоящей пустотой.
Я придумывал и пробовал много схем, имитация псевдокласса, фоновая текстура, рисование на холсте, ни одна из них меня не удовлетворила. Передняя часть настолько сложная, что даже если я встану на колени и попрошу сестру-дизайнера изменить рисунок, я не получу сочувствия.
Мы разные! ! !
Не может быть, боль теперь исходит в первую очередь из мозга, нет места для переговоров, делайте это! Поискав по ключевому слову билета, я обнаружил похожий эффект на Codepen.
See the Pen CSS Concert ticket purchase by Helkyle (@HelKyle) on CodePen.
Увидев впадину и градиент, я твердо верю, что нашел окончательное решение. Посмотрите на исходный код, как! Это определенно хорошая идея, чтобы соединить его в три части!
Конечно гусь! Наше требование — чтобы весь фон купона был градиентным, если он разбит на три части, то градиент должен быть соответственно разбит на три части, что недопустимо.
Кажется, что ClipPath можно использовать для вырезания контента. Нашел кое-что, что видел раньше на CSS TricksстатьяДля того, чтобы быть в эффекте (можноclippyНастройте клип-путь). отДокументацияИз вышесказанного также нецелесообразно использовать в этой сцене. Полая часть не является ни правильной фигурой, ни целым,сдаться.
Свойство маски CSS
Эскизная маска и внутри одинаковую, CSS MASK позволяет заманчивы область в регион до зарезервированной области.
Использование в основном такое же, как фон,Обучение без затрат. Например, изображение-маски, происхождение маски, положение маски, повторение маски и размер маски совпадают с фоном. Поскольку это слишком просто, я не буду говорить об этом здесь.ДокументацияилиZhang Xinxu-CSS маска CSS3 маска/маски подробное введение,
Использование маски в конце концов, моя реализация спроса похож на это:
See the Pen Using Mask To Create Ticket Hollow Effect. by Helkyle (@HelKyle) on CodePen.
Долго думайте о потребностях, вырезайте картинку и пишите строчку основного кода для ее решения. Ключевой момент достаточно прост! легко использовать! Может сделать что-нибудьклассный эффект.
See the Pen Mask Effect - DJI by Helkyle (@HelKyle) on CodePen.
Стоит отметить, что маска поддерживает svg, png и gif, Например, кто-то на Codepen сделал анимацию Губки Боба.
See the Pen #CodePenChallenge - Animated css mask-image by Tony Banik (@tonybanik) on CodePen.
Основной код состоит только из одной строки с использованием GIF-файла Губки Боба. Нет атрибута маски, я действительно не знаю, как начать.
img {
mask-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/10/18/1668599f2b92301d~tplv-t2oaga2asx-image.image);
}
Подожди, а как насчет совместимости?
совместимость
Из CaniUSE текущая совместимость по маске достигает 83,15% (большинству нужно добавить префикс -Webkit), полностью поддерживается IE && Edge. Для частично неподдерживаемых браузеров вы также можете использовать Feature Query для совместимости.
@supports not (mask-size: cover) {
// 不支持的样式
}
Момент куриного супа
Обновления и итерации фронтенд-технологии происходят очень быстро, много лет назад это был еще экспериментальный атрибут, и он достиг времени сбора урожая в мгновение ока. Это отражает важность накопления новых знаний в обычные времена, такие как грид и гудини.Когда вы новичок в контакте, вы не увидите урожая в краткосрочной перспективе.Когда вам нужно его использовать, вы думаете о такой вещи. Бывает, что совместимость тоже держится В глазах окружающих вы просто превосходны. Юнь Даньфэн тихо сказал:
Это ничего, просто чтобы еще раз взглянуть в толпу.
Статьи по Теме
- Clipping and Masking in CSS
- Using CSS Clip Path to Create Interactive Effects
- CSS Masking
- Маска CSS Маска/маски CSS3 подробное введение
Changelog
ИСПРАВЛЕНИЕ: На самом деле конструктор очень хорошо говорит, никаких единоборств.
Некоторые фотографии пейзажей взяты изskypixel