captain-ui/lib/scroll-nav/index.css

有赞vue wap业务组件库

@component-namespace cap{@b scroll-nav{position:fixed;top:0;width:100%;@e icon{position:absolute;top:40px;left:40px;width:44px;height:44px;line-height:44px;background-color:rgba(0,0,0,.3);border:2px solid #fff;border-radius:50%;font-size:24px;color:#fff;text-align:center;z-index:10}@e bg{position:absolute;top:0;left:0;width:100%;height:100%;background:no-repeat top/cover;z-index:-10}@e mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;-webkit-transition:background-color .2s linear .4s;transition:background-color .2s linear .4s;z-index:-9;@m show{background-color:rgba(0,0,0,.4)}}}}@component-namespace cap{@b scroll-nav-swiper{overflow:hidden;@e inner{position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition-property:left,top,-webkit-transform;transition-property:left,top,-webkit-transform;transition-property:transform,left,top;transition-property:transform,left,top,-webkit-transform;-webkit-transition-duration:0;transition-duration:0;-webkit-transition-timing-function:ease;transition-timing-function:ease;cursor:pointer;@m transition{-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s}}}}@-webkit-keyframes slide-up-right{0%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(0,50px,0);transform:rotate(15deg) skew(15deg) translate3d(0,50px,0);opacity:0}to{trnasform:rotate(15deg) skew(15deg) translate3d(0,0,0);opacity:1}}@keyframes slide-up-right{0%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(0,50px,0);transform:rotate(15deg) skew(15deg) translate3d(0,50px,0);opacity:0}to{trnasform:rotate(15deg) skew(15deg) translate3d(0,0,0);opacity:1}}@-webkit-keyframes slide-up-left{0%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(0,50px,0);transform:rotate(-15deg) skew(-15deg) translate3d(0,50px,0);opacity:0}to{trnasform:rotate(-15deg) skew(-15deg) translate3d(0,0,0);opacity:1}}@keyframes slide-up-left{0%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(0,50px,0);transform:rotate(-15deg) skew(-15deg) translate3d(0,50px,0);opacity:0}to{trnasform:rotate(-15deg) skew(-15deg) translate3d(0,0,0);opacity:1}}@-webkit-keyframes slide-up-middle{0%{-webkit-transform:rotate(0) skew(0) translate3d(0,50px,0);transform:rotate(0) skew(0) translate3d(0,50px,0);opacity:0}to{trnasform:rotate(0) skew(0) translate3d(0,0,0);opacity:1}}@keyframes slide-up-middle{0%{-webkit-transform:rotate(0) skew(0) translate3d(0,50px,0);transform:rotate(0) skew(0) translate3d(0,50px,0);opacity:0}to{trnasform:rotate(0) skew(0) translate3d(0,0,0);opacity:1}}@-webkit-keyframes zoom-in-right{0%{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(.8);transform:rotate(15deg) skew(15deg) translateZ(0) scale(.8);opacity:0}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);opacity:1}}@keyframes zoom-in-right{0%{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(.8);transform:rotate(15deg) skew(15deg) translateZ(0) scale(.8);opacity:0}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);opacity:1}}@-webkit-keyframes zoom-in-left{0%{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(.8);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(.8);opacity:0}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);opacity:1}}@keyframes zoom-in-left{0%{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(.8);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(.8);opacity:0}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);opacity:1}}@-webkit-keyframes zoom-in-middle{0%{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(.8);transform:rotate(0) skew(0) translateZ(0) scale(.8);opacity:0}to{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(1);transform:rotate(0) skew(0) translateZ(0) scale(1);opacity:1}}@keyframes zoom-in-middle{0%{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(.8);transform:rotate(0) skew(0) translateZ(0) scale(.8);opacity:0}to{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(1);transform:rotate(0) skew(0) translateZ(0) scale(1);opacity:1}}@-webkit-keyframes zoom-out-right{0%{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(1.2);transform:rotate(15deg) skew(15deg) translateZ(0) scale(1.2);opacity:0}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);opacity:1}}@keyframes zoom-out-right{0%{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(1.2);transform:rotate(15deg) skew(15deg) translateZ(0) scale(1.2);opacity:0}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);transform:rotate(15deg) skew(15deg) translateZ(0) scale(1);opacity:1}}@-webkit-keyframes zoom-out-left{0%{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1.2);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1.2);opacity:0}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);opacity:1}}@keyframes zoom-out-left{0%{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1.2);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1.2);opacity:0}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);transform:rotate(-15deg) skew(-15deg) translateZ(0) scale(1);opacity:1}}@-webkit-keyframes zoom-out-middle{0%{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(1.2);transform:rotate(0) skew(0) translateZ(0) scale(1.2);opacity:0}to{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(1);transform:rotate(0) skew(0) translateZ(0) scale(1);opacity:1}}@keyframes zoom-out-middle{0%{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(1.2);transform:rotate(0) skew(0) translateZ(0) scale(1.2);opacity:0}to{-webkit-transform:rotate(0) skew(0) translateZ(0) scale(1);transform:rotate(0) skew(0) translateZ(0) scale(1);opacity:1}}@-webkit-keyframes slide-left-right{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(-3000px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-3000px,0,0)}60%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(25px,0,0);transform:rotate(15deg) skew(15deg) translate3d(25px,0,0);opacity:1}75%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(-10px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-10px,0,0)}90%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(5px,0,0);transform:rotate(15deg) skew(15deg) translate3d(5px,0,0)}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0);transform:rotate(15deg) skew(15deg) translateZ(0);opacity:1}}@keyframes slide-left-right{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(-3000px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-3000px,0,0)}60%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(25px,0,0);transform:rotate(15deg) skew(15deg) translate3d(25px,0,0);opacity:1}75%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(-10px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-10px,0,0)}90%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(5px,0,0);transform:rotate(15deg) skew(15deg) translate3d(5px,0,0)}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0);transform:rotate(15deg) skew(15deg) translateZ(0);opacity:1}}@-webkit-keyframes slide-left-left{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-3000px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(25px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(25px,0,0)}75%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-10px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-10px,0,0)}90%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(5px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(5px,0,0)}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0);transform:rotate(-15deg) skew(-15deg) translateZ(0);opacity:1}}@keyframes slide-left-left{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-3000px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(25px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(25px,0,0)}75%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-10px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-10px,0,0)}90%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(5px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(5px,0,0)}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0);transform:rotate(-15deg) skew(-15deg) translateZ(0);opacity:1}}@-webkit-keyframes slide-left-middle{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(0) skew(0) translate3d(-3000px,0,0);transform:rotate(0) skew(0) translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(0) skew(0) translate3d(25px,0,0);transform:rotate(0) skew(0) translate3d(25px,0,0)}75%{-webkit-transform:rotate(0) skew(0) translate3d(-10px,0,0);transform:rotate(0) skew(0) translate3d(-10px,0,0)}90%{-webkit-transform:rotate(0) skew(0) translate3d(5px,0,0);transform:rotate(0) skew(0) translate3d(5px,0,0)}to{-webkit-transform:rotate(0) skew(0) translateZ(0);transform:rotate(0) skew(0) translateZ(0);opacity:1}}@keyframes slide-left-middle{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(0) skew(0) translate3d(-3000px,0,0);transform:rotate(0) skew(0) translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(0) skew(0) translate3d(25px,0,0);transform:rotate(0) skew(0) translate3d(25px,0,0)}75%{-webkit-transform:rotate(0) skew(0) translate3d(-10px,0,0);transform:rotate(0) skew(0) translate3d(-10px,0,0)}90%{-webkit-transform:rotate(0) skew(0) translate3d(5px,0,0);transform:rotate(0) skew(0) translate3d(5px,0,0)}to{-webkit-transform:rotate(0) skew(0) translateZ(0);transform:rotate(0) skew(0) translateZ(0);opacity:1}}@-webkit-keyframes slide-right-right{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(3000px,0,0);transform:rotate(15deg) skew(15deg) translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(15deg) skew(15deg) translate3d(-25px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-25px,0,0)}75%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(10px,0,0);transform:rotate(15deg) skew(15deg) translate3d(10px,0,0)}90%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(-5px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-5px,0,0)}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0);transform:rotate(15deg) skew(15deg) translateZ(0);opacity:1}}@keyframes slide-right-right{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(3000px,0,0);transform:rotate(15deg) skew(15deg) translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(15deg) skew(15deg) translate3d(-25px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-25px,0,0)}75%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(10px,0,0);transform:rotate(15deg) skew(15deg) translate3d(10px,0,0)}90%{-webkit-transform:rotate(15deg) skew(15deg) translate3d(-5px,0,0);transform:rotate(15deg) skew(15deg) translate3d(-5px,0,0)}to{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0);transform:rotate(15deg) skew(15deg) translateZ(0);opacity:1}}@-webkit-keyframes slide-right-left{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(3000px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-25px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-25px,0,0)}75%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(10px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(10px,0,0)}90%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-5px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-5px,0,0)}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0);transform:rotate(-15deg) skew(-15deg) translateZ(0);opacity:1}}@keyframes slide-right-left{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(3000px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-25px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-25px,0,0)}75%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(10px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(10px,0,0)}90%{-webkit-transform:rotate(-15deg) skew(-15deg) translate3d(-5px,0,0);transform:rotate(-15deg) skew(-15deg) translate3d(-5px,0,0)}to{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0);transform:rotate(-15deg) skew(-15deg) translateZ(0);opacity:1}}@-webkit-keyframes slide-right-middle{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(0) skew(0) translate3d(3000px,0,0);transform:rotate(0) skew(0) translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(0) skew(0) translate3d(-25px,0,0);transform:rotate(0) skew(0) translate3d(-25px,0,0)}75%{-webkit-transform:rotate(0) skew(0) translate3d(10px,0,0);transform:rotate(0) skew(0) translate3d(10px,0,0)}90%{-webkit-transform:rotate(0) skew(0) translate3d(-5px,0,0);transform:rotate(0) skew(0) translate3d(-5px,0,0)}to{-webkit-transform:rotate(0) skew(0) translateZ(0);transform:rotate(0) skew(0) translateZ(0);opacity:1}}@keyframes slide-right-middle{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:rotate(0) skew(0) translate3d(3000px,0,0);transform:rotate(0) skew(0) translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:rotate(0) skew(0) translate3d(-25px,0,0);transform:rotate(0) skew(0) translate3d(-25px,0,0)}75%{-webkit-transform:rotate(0) skew(0) translate3d(10px,0,0);transform:rotate(0) skew(0) translate3d(10px,0,0)}90%{-webkit-transform:rotate(0) skew(0) translate3d(-5px,0,0);transform:rotate(0) skew(0) translate3d(-5px,0,0)}to{-webkit-transform:rotate(0) skew(0) translateZ(0);transform:rotate(0) skew(0) translateZ(0);opacity:1}}@component-namespace cap{@b scroll-nav-slide{margin-top:30px;width:104%;height:220px;-webkit-transform:rotate(0) skew(0) translateZ(0);transform:rotate(0) skew(0) translateZ(0);opacity:0;cursor:pointer;@m left{-webkit-transform:rotate(-15deg) skew(-15deg) translateZ(0);transform:rotate(-15deg) skew(-15deg) translateZ(0)}@m right{-webkit-transform:rotate(15deg) skew(15deg) translateZ(0);transform:rotate(15deg) skew(15deg) translateZ(0)}@e link{position:relative;left:-4%;display:block;width:108%;height:220px;background-color:rgba(0,0,0,.6);background-size:cover;background-repeat:no-repeat;color:#fff;cursor:pointer}@e mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);opacity:.5}@e title{position:absolute;top:40px;left:30px;width:100%;height:52px;padding:0 30px;font-size:46px;overflow:hidden;text-align:left;white-space:nowrap;@m left{left:80px;padding:0;-webkit-transform:skew(15deg);transform:skew(15deg)}@m right{left:50px;-webkit-transform:skew(-15deg);transform:skew(-15deg)}}@e sub-title{position:absolute;top:96px;left:30px;margin-top:10px;width:100%;height:70px;padding:0 30px;line-height:1.2;font-size:30px;overflow:hidden;text-align:left;@m left{left:70px;width:600px;padding:0;-webkit-transform:skew(15deg);transform:skew(15deg)}@m right{left:64px;width:600px;padding:0;-webkit-transform:skew(-15deg);transform:skew(-15deg)}}}}