이모티콘을 사용하는 CSS 전용 반응 구성 요소

마찬가지로 반응은 많은 웹사이트에서 널리 사용되는 것이므로 여기에서는 이모티콘 또는 모든 종류의 사용자 지정 아이콘과 함께 작동하는 CSS 전용 반응 구성 요소를 직접 구현했습니다.

SVG 또는 PNG 이미지를 다루느라 고생할 필요가 없습니다. 좋아하는 이모티콘을 선택하고 나만의 구성 요소를 만드세요.

게임에서 확인:



위에서 no @keyframes 를 찾을 수 있습니다. 모든 애니메이션은 CSS 전환만 사용하여 수행됩니다.

어떻게 작동합니까?

위의 내용은 매우 기본적인 HTML 코드에 의존합니다.

<input type="checkbox" id="r1">
<label for="r1" class="react">
<i data-icon="💯"></i>
</label>

복잡한 것은 없습니다. 해당하는 <input> 요소가 있는 <label> 및 Emoji를 데이터 속성으로 갖는 <i> 요소. 그게 다야!

모든 마법은 CSS를 사용하여 이루어지며 아래와 같이 다른 레이어가 있습니다.

<input type="checkbox" id="r1">
<label for="r1" class="react">
  ::before [1]
  <i data-icon="💯">
    ::before [2]
    ::after [3]
  </i>
  ::after [4]
</label>

display:inline-grid 및 grid-area:1/1를 사용하여 모든 레이어가 서로 위에 있습니다.



[1]은 아래와 같이 생성된 기본 원입니다.

.react:before {
  content:"";
  grid-area:1/1;
  border-radius:50%;
  border:solid orange calc(var(--r)/2);
}

전환은 스케일 1(0 에서 1 ) 다음 border-width (calc(var(--r)/2) 에서 0 )

transition:
    transform 0.5s,
    border-width 0.5s 0.5s;

--r는 구성 요소의 모든 크기를 제어하는 ​​변수입니다. 예, 확장 가능한 것입니다! 하나의 변수만 조정하면 전체 크기를 제어할 수 있습니다.

[2]는 이모티콘입니다. 복잡한 것은 없습니다:

.react i:before {
  content:attr(data-icon);
  grid-area:1/1;
  font-style:normal;
  font-size:calc(0.6*var(--r));
}

재미는 [3]과 [4]로 시작합니다. 이러한 작은 원은 multiple radial-gradient 을 사용하여 작성됩니다. [3]과 [4]의 차이점은 원 크기와 겹침을 피하기 위한 작은 회전입니다.

.react:after,
.react i:after{
  content:"";
  grid-area:1/1;
  margin: calc(var(--r)/-2);
  --c1:radial-gradient(red    50%,#0000 60%);
  --c2:radial-gradient(orange 50%,#0000 60%);
  background:
    var(--c1),var(--c1),var(--c1),var(--c1),
    var(--c2),var(--c2),var(--c2),var(--c2); 
  background-size:calc(var(--r)/6) calc(var(--r)/6); 
  background-position:
    calc(50% - var(--r)/2) calc(50% - var(--r)/2),
    calc(50% + var(--r)/2) calc(50% - var(--r)/2),
    calc(50% - var(--r)/2) calc(50% + var(--r)/2),
    calc(50% + var(--r)/2) calc(50% + var(--r)/2),
    calc(50% +  0px) calc(50% + var(--r)*0.707),
    calc(50% + var(--r)*0.707) calc(50% +  0px),
    calc(50% - var(--r)*0.707) calc(50% +  0px),
    calc(50% +  0px) calc(50% - var(--r)*0.707);
  background-repeat:no-repeat;
  transform:scale(0);
}
.react i:after {
  background-size:calc(var(--r)/8) calc(var(--r)/8);
  transform:rotate(60deg) scale(0);
}

각각은 원형 모양으로 배치된 8개의 원(빨간색 4개 및 주황색 4개)으로 만들어집니다. Math-folks는 각도 sin()에 대해 cos() 및 N*45deg의 값을 알 수 있습니다.

그들의 전환은 스케일 1(0에서 1로) 그런 다음 background-size 1(위에 정의된 값에서 0로) opacity와 결합됩니다.

transition:
    transform 0.5s 0.5s,
    opacity   0.4s 0.9s,
    background-size 0.5s 0.9s;

마지막으로 [2]와 [3] 모두에 영향을 주는 <i> 요소에 전환을 적용했습니다. 이모지의 원래 색상과 스케일 1로 전환되는 회색 색상을 사용할 수 있는 필터가 있습니다.

스케일 1의 경우 매직 cubic-bezier 기능을 사용하여 1에서 0에서 1로 전환을 만듭니다.

  transition:
     filter .5s .5s,
     transform 1s cubic-bezier(0,26.67,.5,26.67);

아래 게시물에서 이 기술을 자세히 설명합니다.

cube-bezier()를 사용한 고급 CSS 애니메이션

Temani Afif for This is Learning ・ 5월 19일 ・ 12분 읽기

#css #webdev #tutorial #codepen

또한 동일한 게시물에 자세히 설명된 다른 항목cubic-bezier을 사용하고 있는 호버에 흔들림 효과를 추가하고 있습니다.

transition:transform 0.25s cubic-bezier(0.5,400,0.5,-400);

그게 다야!

Font Awesome에서 이모티콘이나 아이콘을 선택하고 --r를 조정하여 크기를 조절하기만 하면 됩니다.

Font Awesome의 CSS가 우리를 위해 할 것이기 때문에 우리가 정의할 필요가 없기 때문에 content Font Awesome 아이콘을 사용할 수 있도록 초기 코드를 약간 변경했습니다.



추신: 이 아이디어는 제가 얼마 전에 답변한 스택 오버플로 질문(How to make a sparkling button animation?)에서 영감을 받았습니다. 이전 코드를 약간 수정해도 같은 효과입니다.