inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

인터랙티브 개발 실무 끝장내기 [역량 강화편]

transition질문드립니다!

225

김도토리

작성한 질문수 13

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이 먹히질 않네요..이유가 뭘까요..

javascript 인터랙티브-웹

답변 1

0

코딩일레븐

안녕하세요 

gradient 가 좀 그런 문제가 있습니다.

그래서 다양한 트릭? 을 이용하는데요

원하시는 게 이런 것인지는 모르겠지만 구현을 한 번 해봤습니다.

https://codepen.io/yahao2512/pen/jOLPxGp?editors=1111

 

:before 와 opacity 효과를 섞은 겁니다.

 

 

0

김도토리

이런식으로 구현할수도 있군요. 감사합니다! 참고하겠습니다

모바일 스와이프 구현 마지막 숙제

0

418

2

레퍼런스 사이트

0

353

1

스크롤위치에 따른 페이지 변화에서

0

279

1

배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?

0

395

1

스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문

0

683

1

페이징.페이지고정2 질문드립니다.

0

465

1

scrollTo 완성본

0

614

2

모바일 3D 입체 카드 제작 아이폰에서 에러

0

392

1

css 질문 드립니다

0

630

1

css 질문

0

291

1

pointBtn.addEventListner("click")

0

315

2

if문의 첫번째 조건 질문 있습니다~

0

289

1

offsetTop, offsetHeight

0

793

2

기존의 축 회전값에 더해서 rotate

0

323

1

모바일 드래그 강의 질문드립니다!

0

262

1

질문입니다.

0

227

1

GSAP(트윈맥스) 라이센스 관련 질문 드립니다.

0

1664

1

wrap 안에 click 이벤트

0

230

1

greensock을 사용하려면

0

705

1

TweenMax 효과 리셋

0

534

1

max 이상으로 입력했을 때 질문입니다.

0

198

1

dom에서 직접i nput의 value 값을 갖고 나오는 것에 대해

0

376

1

화살표 회전 질문

0

269

1

질문이용~

0

224

1