-
카테고리
-
세부 분야
자격증 (디자인)
-
해결 여부
해결됨
slide animation css 부분
21.08.27 12:12 작성 조회수 209
1
슬라이드 애니메이션 css 부분에서
가로와 세로로 만드는 부분은
.sldie div{ }에 설정값을 주셨고,
크로스 페이드에는
.slide div a {}에 설정값을 주셨는데
왜 그런거죠?
가로
.slide { /*position: relative;*/ width: 1200px; height: 300px; overflow: hidden; } .slide > div { width: 3600px; font-size: 0; /*position: absolute;*/ /*top: 0; left: 0;*/ animation: slide 10s linear infinite;
세로
.slide { /*position: relative;*/ width: 1200px; height: 300px; overflow: hidden; } .slide > div { /*position: absolute; top: 0; left: 0;*/ font-size: 0; animation: slide 10s linear infinite; }
크로스페이드
.slide { position: relative; width: 1200px; height: 300px; } .slide div { font-size: 0; } .slide div a { position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; /*opacity: 0;*/ visibility: hidden; }
답변을 작성해보세요.
0
코딩웍스(Coding Works)
지식공유자2021.08.27
가로 세로 슬라이더의 a 태그는 한자리에 모이면 안됩니다.
가로 슬라이더는 a태그가 .slide div 안에 가로로 길게 3개 있구요.
세로 슬라이더는 a태그가 .slide div 안에 세로로 길게 3개 있구요.
그래서 .slide div가 움직이도록 한거구요.
크로스페이드는 a태그가 한자리에 모여야 하기 때문에 .slide div를 부모요소로 하고 .slide div a를 자식요소로 해서 .slide div 안에서 a가 크로스페이드 되도록 만든겁니다.
답변 1