Вспомните CSS-реализации анимации подсветки аватара.

CSS

предисловие

После долгого отсутствия я снова нашла время написать блог (づ￣3￣)づ╭❤~~

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

Или просто посмотрите на две картинки для иллюстрации ~ все коды вставлены внизу текста, или вы можете перейти по ссылкеCodePen

думать

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

Ответ - да (●´∀｀●)ﾉ

Сначала первый шаг! Для меня это также первый шаг к тому, чтобы отказаться от вырезания картинок!

高光

Чтобы все ясно видели. Ставлю черный фон, по идее, если картинку обрезать, то будет прозрачный PNG.

Я не буду обсуждать, что лучше между реализацией CSS и PNG~

Во-первых, я разработал два метода реализации CSS для выделения.

Устаревший вариант один

Внедрение прямоугольников и цветовых градиентовbackground: linear-gradient(90deg, transparent 15%, #fff);После этого заставьте его вращатьсяtransform: rotate(?deg);. Дополнительная часть будет аватаркойoverflow:hidden, то есть кажется, что этой изюминки легко добиться? Но сложность заключается в том, что для полного согласования ширины, высоты и угла поворота с проектным чертежом требуются определенные математические расчеты по геометрии плоскости (и это я уже вернула учителю...).

Устаревший второй вариант

Непосредственно реализуйте прямоугольный цветовой градиент, а затем реализуйте маленькие треугольники в верхнем левом и нижнем правом углах для вырезания маски. К сожалению, мои навыки Photoshop лучше, чем навыки CSS в этом отношении... (Кажется, я не могу найти это поддержка в CSS: Маска элемента на другой элемент, если кто знает, можете оставить сообщение и сообщить мне)

выполнить

Когда я изо всех сил пытался вернуться к схеме листов, мне вспомнилось свойство CSSclip-path, вы можете нажать на этот MDN, чтобы увидеть это свойство. Учащиеся, которым небезразлична совместимость, также могут пойти и посмотретьСовместимость

Введение в документ MDN:Свойство CSS clip-path создает область отсечения, в которой может отображаться только часть элемента. Часть внутри области отображается, а часть вне области скрыта. Область отсечения — это путь, определяемый встроенным URL-адресом или внешним svg, на который ссылаются, или фигурой, такой как circle(). Свойство clip-path заменяет устаревшее свойство clipping clip.

Это свойство очень сильное. Вы можете вырезать эллипсы, многоугольники, контуры SVG, а также в соответствии с геометрической блочной моделью~

отлично! Я хочу параллелограмм,clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);, очень легко достичь ~

Следующие конкретные требования к анимации: 300 мс, чтобы аватар стал больше, 500 мс, чтобы подсветка рисовалась слева направо, и 300 мс, чтобы аватар увеличился до исходного размера.

Этого можно добиться с помощью комбинации анимации из двух элементов~animation: heartbeat 1.1s linear forwards; animation: highlight 1.1s linear forwards;

Поскольку эффект необходимо активировать в подходящее время, он неотделим от помощи Javascript. Реализация здесь состоит в том, чтобы добавить имя класса анимации, когда эффект необходим, и активно удалить имя класса после окончания анимации~

Если вам интересно, вы можете взглянуть на код, PS: CSS использует формат less~

код

<div class="user-headpic"></div>

@size: 50px;
.user-headpic {
  position: relative;
  display: block;
  width: @size;
  height: @size;
  background: 
    url("https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/10/25/166a8fc6cd14bf6f~tplv-t2oaga2asx-image.image")
    center/cover
    no-repeat;
  border-radius: 100%;
  border: 2px solid silver;
  overflow: hidden;
  &:after {
    .cube(@size);
    .highlight(@size);
  }
  &.starring {
    animation: heartbeat 1.1s linear forwards;
    &:after {
      animation: highlight 1.1s linear forwards;
    }
  }
}

.cube(@w) {
  content: '';
  position: absolute;
  width: @w;
  height: @w;
}

.highlight(@w) {
  position: absolute;
  width: @w;
  height: @w;
  left: -@w;
  top: 0;
  background: linear-gradient(90deg, transparent 15%,  #fff);
  -webkit-clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);
  clip-path: polygon(50% 0, 100% 0%, 50% 100%, 0% 100%);
  z-index: 3;
}

@keyframes highlight {
  0 {
    transform: translateX(-@size);
  }
  27.27% {
    transform: translateX(-@size);
  }
  72.73% {
    transform: translateX(2 * @size);
  }
  100% {
    transform: translateX(2 * @size);
  }	
}
@keyframes heartbeat {
  0 {
    transform: scale(1);
  }
  27.27% {
    transform: scale(1.2);
  }
  72.73% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

думать

Эта совместимость свойств CSS не очень дружелюбна. Тем не менее, неплохо играть в духе обучения, может быть, это пригодится через несколько лет, хахаха~

Категории