CSS에서의 선형 그라데이션 애니메이션

반응형

안녕, 동료 크리에이터들

CSS에서 두 선형 그라데이션 사이에 호버 애니메이션을 만들 수는 없지만 다른 방법이 있습니다. 1분 안에 그것이 무엇인지 배워봅시다!

비디오 버전을 보고 싶으시다면 바로 여기 있습니다.

 

1. HTML 구조.

다음과 같은 제목의 카드 만들기:

<div class="card">
        <div class="layer"></div>
      <h1>São Paulo</h1>
</div>

2. 카드를 스타일링하세요.

카드의 너비와 높이를 지정하고 카드 내용물의 가운데에 맞추고 배경을 추가합니다.

 

.card {
    width: 400px;
    height: 400px;
    border-radius: 25px;
    margin: 100px auto;
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, #2193b0, #6dd5ed); 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.card h1 {
    color: #f1f1f1;
    font-size: 50px;
    text-transform: uppercase;
}

다음 후 유사 요소를 사용하여 새 도면층을 작성합니다.

.card::after {
    content:"";
    width: 100%;
      height: 100%;
        border-radius: 25px;
    background: linear-gradient(to right, #8a2387, #e94057, #f27121);
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

카드의 전체 사이즈를 차지하지만 색상은 바꿀 것입니다. 그것은 내용물과 컨테이너 사이에 위치할 것입니다. 그것은 현재로서는 불투명하지 않다.

마지막으로 카드를 가리킬 때 의사 요소에 다른 불투명도를 추가합니다.

 

.card:hover::after {
    opacity: 1;
}

이제 두 선형 그라데이션 사이에서 전환됩니다! 최종 결과를 보려면 여기서 소스 코드를 확인하십시오!

오셔서 제 유튜브 채널을 보세요: https://www.youtube.com/c/Learntocreate/videos

곧 만나요!

엔조.