NetLify ' S Neat-O 슬라이딩 버튼 효과를 재현합니다

NetLify의 공식 웹 사이트의 다운로드 버튼은 간단하고 우아하며 갑작스럽지 않고 눈을 끌어 들이고 대화식 효과는 특히 인상적입니다. 마우스가 호버링되면 버튼이 확장되어 "다운로드"라는 단어가 표시됩니다. Safari의 디스플레이에서 약간의 차이가 있음을 알았으며, 이로 인해 구현 방법에 대한 관심을 불러 일으켰습니다. 그래서 나는 효과를 재현하려고 시도하고 간격을 최적화했습니다.

핵심 기술은 네 가지 측면에 있습니다.

• left 속성을 사용하여 디스플레이를 제어하고 "다운로드"태그를 숨기십시오.
• 버튼의 호버링 상태에서 padding 속성을 사용하여 "다운로드"태그를위한 공간을 마련하십시오.
• scale(1, 1) 버튼이 호버링되면 (1, 1), 움직일 때 콘텐츠가 그대로 유지되도록합니다.
• transition 속성을 사용하여 버튼의 padding , 배경 background-position 위치 및 transform 속성을 애니메이션 속성을 사용하여 부드러운 애니메이션 효과를 달성하십시오.

다음은 원리를보다 명확하게 보여줄 스타일을 포함하지 않는 코드 예제입니다.

작동 방식을 이해하기 어려운 경우 다음 이미지는 "다운로드"태그가 overflow: hidden 통해 버튼에서 숨겨져있는 방법과 마우스가 호버링 될 때 볼 수있는 방법을 보여줍니다.

아이콘과 "다운로드"레이블의 음수 left 값을 설정하여 숨기고 전체 버튼이 호버링 될 때 양수 값으로 재설정하십시오.

 /* 기본 상태*/
.Button {
    배경: 
      #f6bc00 
      URL (데이터 : image/svg xml; base64, ...)
      반복되지 않은 -12px 센터;
    오버플로 : 숨겨진;
}

.Button Span : Nth-Child (1) {
  위치 : 절대;
  왼쪽 : -70px;
}

/* 호버 상태*/
.Button : 호버 {
  왼쪽 패딩 : 95px;
  배경 위치 : 5px 센터;
}

.Button Span : Nth-Child (1) {
  위치 : 절대;
  왼쪽 : -70px;
}

이 상태만으로도 아이콘이보기에 미끄러 져 "다운로드"태그를위한 충분한 공간을 남겨 두지 만, 호버링 할 때 태그가 버튼 바깥에 떠 다니게됩니다.

현재 버튼에 scale(1, 1) 추가하면 컨텐츠를 완료 할 수 있습니다.

 /* 호버 상태*/
.Button : 호버 {
  왼쪽 패딩 : 95px;
  배경 위치 : 5px 센터;
  변환 : 스케일 (1, 1);
}

padding 값은 경험 가치이며 글꼴, 글꼴 크기 등과 같은 요소에 따라 변경됩니다.

마지막으로, transition 속성은 애니메이션 전환을 부드럽게하고 사용자 경험을 향상시킵니다.

 /* 기본 상태*/
.Button {
    배경: 
      #f6bc00 
      URL (데이터 : image/svg xml; base64, ...)
      반복되지 않은 -12px 센터;
    오버플로 : 숨겨진;
    전환 : 패드.
}

둥근 모서리와 같은 자세한 수정을 추가하면 아름다운 버튼이 생깁니다.

위 내용은 NetLify ' S Neat-O 슬라이딩 버튼 효과를 재현합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!