Difference between revisions of "Template:Jilin China Menu"
| Line 58: | Line 58: | ||
} | } | ||
| + | .section-wrap{ width:100%;height:100%;position:relative; z-index:0;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);} | ||
| + | .section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;} | ||
| + | .section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center; height:100%;} | ||
| + | .section-wrap .section .title p{ padding:0 4%;opacity:1} | ||
| + | .content{ | ||
| + | font-size:0.5em; text-align:justify; padding:0 15px 0 15px; overflow: auto; height:60%;width:90%; background-color:rgba(151,151,151,0.35); align-content:center; margin:auto; | ||
| + | } | ||
| + | .section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);} | ||
| + | .section-wrap .section-1{ background-color:rgba(51,112,81,0.3)} | ||
| + | .section-wrap .section-2{ background-color:rgba(92,184,92,0.3)} | ||
| + | .section-wrap .section-3{ background-color:rgba(91,192,222,0.3)} | ||
| + | .section-wrap .section-4{ background-color:rgba(240,173,78,0.3)} | ||
| + | .section-wrap .section-5{ background-color:rgba(217,83,79,0.3)} | ||
| + | .put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);} | ||
| + | .put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);} | ||
| + | .put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);} | ||
| + | .put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);} | ||
| + | .put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);} | ||
| + | .section-btn{ width:14px;position:fixed;right:1%;top:50%;} | ||
| + | .section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;} | ||
| + | .section-btn li.on{ background:#fff} | ||
| + | .arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;} | ||
| + | .arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;} | ||
| + | @keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} } | ||
| + | @-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} } | ||
/*************************************************整屏翻页*************defualt**********************************************/ | /*************************************************整屏翻页*************defualt**********************************************/ | ||
Revision as of 06:53, 14 October 2016
