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

  • 최근 수정 시각: 2023년 2월 27일 (월) 20:17
  • 위키의 문서를 이용할 때에는 문서의 라이선스를 확인하세요. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | 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/분류:플로라_유니버스'">
                 <div class="banner-img exid">
                 <div class="banner-img slide-bottom">
                     <img id="exid" alt="플로라.svg" src="/w/images/1/18/플로라.svg" style="width: auto; height: 5.5vw;">
                     <img alt="플로라.svg" src="/w/images/1/18/플로라.svg" style="width: auto; height: 5.5vw;">
                 </div>
                 </div>
             </div>
             </div>
15번째 줄: 15번째 줄:
         <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/한나라닷컴'">
                 <div id="hannara-1" class="banner-img blur">
                 <div id="hannara-2" class="banner-img slide-right-300">
                     <img id="exid" alt="한나라닷컴.png" src="/w/images/b/bc/Hannara_c.png">
                    <img alt="윤석열.png" src="/w/images/6/6a/Hannara-banner-2.png">
                </div>
                <div id="hannara-3" class="banner-img slide-right-200">
                    <img alt="나경원.png" src="/w/images/8/89/Hannara-banner-1.png">
                </div>
                <div id="hannara-4" class="banner-img slide-right-100">
                     <img alt="이재명.png" src="/w/images/3/3a/Hannara-banner-3.png">
                </div>
                <div id="hannara-1" class="banner-img text-focus-in">
                    <img alt="한나라닷컴.png" src="/w/images/b/bc/Hannara_c.png">
                 </div>
                 </div>
             </div>
             </div>
22번째 줄: 31번째 줄:
         <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/아름다운_나라'">
                 <div class="banner-img exid">
                 <div class="banner-img slide-bottom">
                     <img alt="아름다운나라.png" src="/w/images/f/fc/아나_로고.png">
                     <img alt="아름다운나라.png" src="/w/images/f/fc/아나_로고.png">
                 </div>
                 </div>
29번째 줄: 38번째 줄:
         <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/리좀'">
                 <div class="banner-img exid">
                 <div class="banner-img slide-bottom">
                     <img alt="리좀.svg" src="/w/images/5/57/%EB%A6%AC%EC%A2%802.png">
                     <img alt="리좀.svg" src="/w/images/5/57/%EB%A6%AC%EC%A2%802.png">
                 </div>
                 </div>
138번째 줄: 147번째 줄:


/* 밑에서 올라오기 */
/* 밑에서 올라오기 */
.exid {
.slide-bottom {
         opacity: 0;
         opacity: 0;
         top: 60%;
         top: 60%;
        left: 50%;
         transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         transition: 500ms;
         transition: 500ms;
}
}
.swiper-slide-active .exid {
.swiper-slide-active .slide-bottom {
        opacity: 1;
        top: 50%;
        transition: 500ms;
}
/* 오른쪽에서 들어오기 */
.slide-right-100, .slide-right-200, .slide-right-300 {
        opacity: 0;
        transform: translate(-50%, -50%);
        transition: 500ms;
}
.swiper-slide-active .slide-right-100 {
         opacity: 1;
         opacity: 1;
        animation: slide-left-100 1s cubic-bezier(0.250,0.460,0.450,0.940) both;
         transition: 500ms;
         transition: 500ms;
}
}
 
.swiper-slide-active .slide-right-200 {
        opacity: 1;
        animation: slide-left-100 2s cubic-bezier(0.250,0.460,0.450,0.940) both;
        transition: 500ms;
}
.swiper-slide-active .slide-right-300 {
        opacity: 1;
        animation: slide-left-100 3s cubic-bezier(0.250,0.460,0.450,0.940) both;
        transition: 500ms;
}
@keyframes slide-left-100 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}
@keyframes slide-left-200 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
    }
}
@keyframes slide-left-300 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-300px);
        transform: translateX(-300px);
    }
}
/* 흐렸다가 선명해지기 */
/* 흐렸다가 선명해지기 */
.blur {
.text-focus-in {
         opacity: 0;
         opacity: 0;
         transition: 500ms;
         transition: 500ms;
}
}
.swiper-slide-active .blur {
.swiper-slide-active .text-focus-in {
         animation: text-focus-in .5s cubic-bezier(0.550,0.085,0.680,0.530) both;
         animation: text-focus-in .5s cubic-bezier(0.550,0.085,0.680,0.530) both;
}
}
175번째 줄: 234번째 줄:
         position: absolute;
         position: absolute;
}
}
.exid {
.slide-bottom {
        top: 60%;
         left: 50%;
         left: 50%;
        transform: translate(-50%, -50%);
}
.swiper-slide-active .exid {
        top: 50%;
}
}


188번째 줄: 242번째 줄:
         max-width: 400px;
         max-width: 400px;
}
}
#hannara-img-2 {
#hannara-2 {
        position: absolute;
         top: -50px;
        opacity: 0;
         right: 90px;
         top: 120%;
         max-width: 550px;
         left: 80%;
         transform: translate(-50%, -50%);
        transition: 500ms;
}
.swiper-slide-active #hannara-img-2 {
        opacity: 1;
        top: 40%;
        transition: 500ms;
}
}
 
#hannara-3 {
#hannara-img-3 {
         top: 50px;
        position: absolute;
         right: -100px;
        opacity: 0;
         max-width: 450px;
         top: 120%;
         left: 20%;
         transform: translate(-50%, -50%);
        transition: 500ms;
}
}
.swiper-slide-active #hannara-img-3 {
#hannara-4 {
         opacity: 1;
         top: -10px;
         top: 40%;
         right: -280px;
         transition: 500ms;
         max-width: 600px;
}
}


 
/* 배너 배경 */
.hannara {
.hannara {
         background-color: #FFF;
         background-color: #FFF;
257번째 줄: 299번째 줄:
     autoplay: {
     autoplay: {
     //시간 1000 이 1초
     //시간 1000 이 1초
     delay: 2500,
     delay: 4000,
     disableOnInteraction: false,
     disableOnInteraction: false,
     },
     },

2023년 2월 27일 (월) 20:17 판