연습장
컨텐츠 뒤에서 옆으로 지나가는 텍스트 애니메이션 본문
<div>
<img>
<img>
<img>
</div>
<style>
div { white-space:nowrap; z-index:-1}
img { display:inline-block; animation:left_text 10s linear infinite; }
@keyframe left_text {
0% { transform:translateX(0%); }
100% { transform:translateX(-100%); }
}
</style>
꼭 텍스트이미지가 아닌 다른것이어도 응용할 수 있을거 같다
ex) 물결이 치는듯한 이미지. width값이 길어야 할듯
'css' 카테고리의 다른 글
그라디언트 보더 사용하기 (0) | 2022.02.10 |
---|---|
포토샵 drop-shadow 를 css로 그대로 표현하기 (0) | 2021.12.16 |
핀터레스트 스타일 레이아웃 (벽돌 레이아웃, masonry) (0) | 2021.11.25 |
reset css (0) | 2021.11.10 |