반응형
안녕, 동료 크리에이터들
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
곧 만나요!
엔조.
'css' 카테고리의 다른 글
TailwindCSS에 사용자 지정 글꼴 클래스 추가 (0) | 2022.01.19 |
---|---|
CSS Flexbox를 연습한 방법 (0) | 2022.01.19 |
프리즘 및 Next.js를 사용한 구문 강조 표시 (0) | 2022.01.19 |
React형 웹사이트를 2시간 만에 새로 만들었습니다. (0) | 2022.01.19 |
#100일 코드 (0) | 2022.01.19 |
댓글