.star {
animation: light 3s forwards;
}
@keyframes light {
0% {
opacity: 0%;
}
100% {
opacity: 100%;
}
}✅css
1) 빛 이미지를 html에 작성한다
2) keyframe으로 opacity값을 0에서 100으로 가게 하여 서서히 밝아지는 듯한 효과를 준다
3) 원하는 이미지 클래스에 animation에 keframe명과 시간을 작성해준다
✔다양한 서서히 나타나는 효과에도 활용가능
'Coding > css' 카테고리의 다른 글
| [css] input number 우측 버튼 없애기 (0) | 2022.06.22 |
|---|---|
| [css] toggle 버튼 만들기 (0) | 2022.06.17 |
| [css] 여러 개 레이어가 겹쳐졌을 때 하나의 click이벤트만 실행되게 하고 싶을 때 (0) | 2022.06.15 |
| [css] swiper slider 마지막 슬라이드 스크롤 (0) | 2022.06.15 |
| [css] position sticky이용하여 스크롤시 좌측 텍스트는 고정하고 우측 이미지 움직이기, 모바일버전에서 스크롤시 텍스트가 배경으로 깔리고 이미지 덮기 (0) | 2022.06.15 |