호버 효과 - II

Coddy의 3D 카드 | 프론트엔드 프로젝트 코스 레슨 — 31개 중 31번째.

이 코드는 "bottom" 클래스를 가진 요소 내부에 있는 "social-buttons-container" 클래스를 가진 컨테이너 안의 소셜 버튼 스타일을 지정하고 있습니다. 상세 내용을 살펴보겠습니다:

처음 세 개의 코드 블록은 소셜 버튼에 대한 트랜지션(transition)을 설정합니다. 각 버튼은 트랜지션이 시작되기 전에 서로 다른 지연 시간(delay)을 가집니다. 트랜지션은 "transform" 속성(아마도 이동을 처리함)과 "box-shadow" 속성(아마도 그림자 효과를 제어함)에 적용됩니다. 이러한 트랜지션은 버튼의 움직임과 그림자 변화를 시간에 따라 부드럽게 만들어 줍니다.
네 번째 블록은 소셜 버튼 내부의 SVG(Scalable Vector Graphics) 아이콘에 대한 너비(width)와 채우기 색상(fill color)을 설정합니다.
다섯 번째 블록은 소셜 버튼에 마우스를 올렸을 때(hover)의 스타일을 설정합니다. 배경색을 검은색으로 변경하고 커서를 포인터로 변경하여 클릭 가능하다는 것을 나타냅니다.
마지막 블록은 소셜 버튼에 마우스를 올렸을 때 SVG 아이콘의 채우기 색상을 흰색으로 변경하여 사용자에게 시각적 피드백을 제공합니다.

챌린지

쉬움

다음 코드를 사용하세요:

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

3D 카드가 완성되었습니다!

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

호버 효과 - II

3D 카드 | 프론트엔드 프로젝트의 모든 레슨