연습장:Sakura: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 2월 27일 (월) 19:35
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 문서 역사
← 이전 편집다음 편집 →
시각위키텍스트
편집 요약 없음
편집 요약 없음
8번째 줄: 8번째 줄:
         <div class="swiper-slide">
         <div class="swiper-slide">
             <div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스'">
             <div id="banner" class="flora" onclick="location.href='/w/index.php/분류:플로라_유니버스'">
                 <img id="flora-img-1" alt="플로라.svg" src="/w/images/1/18/플로라.svg" style="width: auto; height: 5.5vw;">
                 <div class="exid">
                    <img id="exid" alt="플로라.svg" src="/w/images/1/18/플로라.svg" style="width: auto; height: 5.5vw;">
                </div>
             </div>
             </div>
         </div>
         </div>
         <div class="swiper-slide">
         <div class="swiper-slide">
             <div id="banner" class="hannara" onclick="location.href='/w/index.php/한나라닷컴'">
             <div id="banner" class="hannara" onclick="location.href='/w/index.php/한나라닷컴'">
                 <img id="hannara-img-1" alt="한나라닷컴.png" src="/w/images/2/23/Hannara_w.png" style="width: auto; height: 3.5vw;">
                 <div class="blur">
                    <img id="exid" alt="한나라닷컴.png" src="/w/images/2/23/Hannara_w.png">
                </div>
             </div>
             </div>
         </div>
         </div>
         <div class="swiper-slide">
         <div class="swiper-slide">
             <div id="banner" class="ana" onclick="location.href='/w/index.php/아름다운_나라'">
             <div id="banner" class="ana" onclick="location.href='/w/index.php/아름다운_나라'">
                 <img id="ana-img-1" alt="아름다운나라.png" src="/w/images/f/fc/아나_로고.png" style="width: auto; height: 5.5vw;">
                 <div class="exid">
                    <img alt="아름다운나라.png" src="/w/images/f/fc/아나_로고.png">
                </div>
             </div>
             </div>
         </div>
         </div>
         <div class="swiper-slide">
         <div class="swiper-slide">
             <div id="banner" class="rhizome" onclick="location.href='/w/index.php/리좀'">
             <div id="banner" class="rhizome" onclick="location.href='/w/index.php/리좀'">
                 <img id="rhizome-img-1" alt="리좀.svg" src="/w/images/5/57/%EB%A6%AC%EC%A2%802.png" style="width: auto; height: 5.5vw;">
                 <div class="exid">
                    <img alt="리좀.svg" src="/w/images/5/57/%EB%A6%AC%EC%A2%802.png">
                </div>
             </div>
             </div>
         </div>
         </div>
128번째 줄: 136번째 줄:
         color: #FFF;
         color: #FFF;
}
}
#flora-img-1 , #hannara-img-1, #ana-img-1, #rhizome-img-1 {
 
/* 밑에서 올라오기 */
.exid {
         position: absolute;
         position: absolute;
         opacity: 0;
         opacity: 0;
136번째 줄: 146번째 줄:
         transition: 500ms;
         transition: 500ms;
}
}
.swiper-slide-active #flora-img-1, .swiper-slide-active #hannara-img-1, .swiper-slide-active #ana-img-1, .swiper-slide-active #rhizome-img-1 {
.swiper-slide-active .exid {
         opacity: 1;
         opacity: 1;
         top: 50%;
         top: 50%;
         transition: 500ms;
         transition: 500ms;
}
/* 흐렸다가 선명해지기 */
.blur {
        position: absolute;
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: 500ms;
}
.swiper-slide-active .blur {
        animation: text-focus-in .5s cubic-bezier(0.550,0.085,0.680,0.530) both;
}
@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}
}


2023년 2월 27일 (월) 19:35 판