점점 가늘어지는 그라디언트 애니메이션의 부드러운 색상 전환을 달성하는 방법은 무엇입니까?
P粉285587590
2023-09-01 16:37:22
<p>테이퍼형 그라디언트에 애니메이션을 적용하고 있는데 색상 변경이 충분히 부드럽지 않습니다.
다양한 글을 봤는데 제대로 재현이 안되네요
내 코드는 여기에서 찾을 수 있습니다: </p>
<pre class="brush:php;toolbar:false;"><style>
몸{
최소 높이: 100vh;
디스플레이: 플렉스;
항목 정렬: 중앙;
내용 정당화: 센터;
}
.피라미드 {
너비: 500px;
높이: 500px;
배경 이미지: 원뿔형 그라데이션(빨간색 135deg, 녹색 135deg, 노란색 165deg, 노란색 165deg);
클립 경로: 다각형(50% 50%, 0% 100%, 100% 100%);
애니메이션: 1초 완화 무한 변경;
}
.피라미드:호버{
배경 이미지: 원뿔형 그라데이션(빨간색 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
}
@키프레임 변경{
0%{
배경 이미지: 원뿔형 그라데이션(빨간색 135deg, 노란색 135deg, 노란색 165deg, 밝은 분홍색 165deg);
/*배경: 빨간색;*/
}
50%{
배경 이미지: 원뿔형 그라데이션(빨간색 135deg, #cadfca 135deg,#dddd3f 165deg, #aeae30 165deg);
}
100%{
배경 이미지: 원뿔형 그라데이션(빨간색 135deg, #565644 135deg, #838314 165deg, #a68f03 165deg)
}
}
</스타일>
</머리>
<본문>
<div class="피라미드">
</div>
</body></pre>
<p>변경을 더 원활하게 만드는 방법</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
배경 이미지가 원하는 방식으로 원활하게 애니메이션되지 않습니다.
그러나 불투명도를 부드럽게 애니메이션화할 수 있으므로 효과를 얻는 한 가지 방법은 두 개의 배경 이미지를 서로 위에 배치하고 불투명도를 변경하여 점차적으로 하나씩 변경하는 것입니다.
귀하의 경우에는 요소 자체가 아닌 의사 요소의 전후에 배경 이미지를 넣을 수 있습니다.
동일한 애니메이션이 있지만 하나는 중간에서 시작됩니다(불투명도가 1인 경우).
전체 지속시간이 1초밖에 되지 않으면 블렌딩 효과를 구현하기 어렵기 때문에 이 코드에서는 지속시간을 늘려 효과를 확인할 수 있습니다.
물론 필요에 따라 타이밍을 변경할 수 있습니다.
오버레이가 항상 반투명 이미지가 아닌 "전체" 이미지를 제공하도록 변경 사항도 선형입니다.