반응형
1. 애니메이션 효과 01
라인이 계속 떨어지는 효과로 싱글홈페이지 스크롤 표시에 표현하기 좋음.
예시)
HTML
<div class="scroll_block">
<div class="letters">
<span>S</span>
<span>C</span>
<span>R</span>
<span>O</span>
<span>L</span>
<span>L</span>
</div>
<div class="liner"></div>
</div>
CSS
.scroll_block { width: 300px; height:300px; border: 1px solid #dfdfdf; }
.scroll_block .letters span { display: block; padding: 2px 0; font-size: 12px; text-align: center;}
.scroll_block .liner { width: 1px; height: 100px; position: relative; margin: 12px auto 0; overflow: hidden;}
.scroll_block .liner::before { content: ''; display: block;position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; animation: scrolling 2s ease-in-out infinite; -webkit-animation: scrolling 2s ease-in-out infinite;}
@keyframes scrolling{0%{top:-110px;opacity:0}10%{opacity:0}50%{opacity:1}90%{opacity:0}100%{top:110px;opacity:0}
보기)
See the Pen QWNYdOJ by minjeong kim (@chloe1103) on CodePen.
2. indicator
반응형
'프론트엔드 > CSS' 카테고리의 다른 글
[Infinite Scroll Banner Animation] JS 없이 CSS로만 롤링 스크롤 배너 만들기 (1) | 2023.11.27 |
---|---|
VS Code 비주얼스튜디오 저장 시, 줄 자동 정렬되는 옵션 끄기 (6) | 2021.09.09 |
[CSS] text attribute(속성) / 텍스트 CSS 효과 종류로 홈페이지 만들기 예시 & 연습 (0) | 2020.09.22 |
[CSS] 태그 <ul>에 사용되는 꿀팁 CSS 종류들 (0) | 2020.09.14 |
[CSS] CSS3 셀럭터 selector 마스터하기 (0) | 2020.04.12 |