-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
transition질문드립니다!
21.12.06 14:42 작성 조회수 166
0
선생님께서 알려주신 transition을 응용해보았는데요.
h1 {
font-size: 50px;
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
padding: 5%;
border-radius: 5%;
transition: background 0.5s ease-in;
}
h1:hover {
background: rgb(251, 139, 139);
background: radial-gradient(circle, rgba(251, 139, 139, 1) 26%, rgba(148, 233, 163, 0.4318102240896359) 100%);
}
이런 코드를 적용했을 때 background에 transition을 줬는데 background에 단일 색상을 적용했을 때는 transition이 적용되는데 gradient를 주니까 transition이 먹히질 않네요..이유가 뭘까요..
답변을 작성해보세요.
0
코딩일레븐
지식공유자2021.12.07
안녕하세요
gradient 가 좀 그런 문제가 있습니다.
그래서 다양한 트릭? 을 이용하는데요
원하시는 게 이런 것인지는 모르겠지만 구현을 한 번 해봤습니다.
https://codepen.io/yahao2512/pen/jOLPxGp?editors=1111
:before 와 opacity 효과를 섞은 겁니다.
답변 1