<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>页面实现的平滑效果</title> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Slab:400,700"> <!-- <link rel="stylesheet" type="text/css" href="style.css"> --> <style> @font-face { font-family: "Raphaelicons"; src: url('./fonts/raphaelicons-webfont.eot') format('eot'), url('./fonts/raphaelicons-webfont.ttf') format('truetype'), url('./fonts/raphaelicons-webfont.woff') format('woff'), url('./fonts/raphaelicons-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } body { font-family: Georgia, serif; background: #ddd; font-width: 400; font-size: 15px; color: #333; overflow: hidden; -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: #555; } .clr { width: 0; height: 0; overflow: hidden; clear: both; margin: 0; padding: 0; } .st-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-family: "Josefin Slab", "Myriad Pro", Arial, sans-serif; } .st-container > input, .st-container > a { width: 20%; height: 34px; line-height: 34px; position: fixed; bottom: 0; cursor: pointer; } .st-container > input { opacity: 0; z-index: 1000; } .st-container > a { z-index: 10; font-size: 16px; font-weight: 700; background: #e23a6e; text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(151, 24, 64, 0.2); } #st-control-1, #st-control-1 + a { left: 0%; } #st-control-2, #st-control-2 + a { left: 20%; } #st-control-3, #st-control-3 + a { left: 40%; } #st-control-4, #st-control-4 + a { left: 60%; } #st-control-5, #st-control-5 + a { left: 80%; } .st-container input:checked + a, .st-container input:checked:hover + a { background: #821134; } .st-container input:checked + a:after { content: ''; width: 0; height: 0; overflow: hidden; border: 20px solid transparent; border-bottom-color: #821134; //border-top-color: transparent; position: absolute; bottom: 33px; left: 50%; margin-left: -20px; } .st-container input:hover + a { background: #ad244f; } /*内容*/ .st-scroll, .st-panel { width: 100%; height: 100%; position: relative; } .st-scroll { left: 0; top: 0; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .st-panel { background: #fff; overflow: hidden; } #st-control-1:checked ~ .st-scroll { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } #st-control-2:checked ~ .st-scroll { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } #st-control-3:checked ~ .st-scroll { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } #st-control-4:checked ~ .st-scroll { -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); } #st-control-5:checked ~ .st-scroll { -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); -ms-transform: translateY(-400%); transform: translateY(-400%); } .st-desc { width: 200px; height: 200px; background: #fa96b5; position: absolute; left: 50%; margin-left: -100px; top: 0; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } [data-icon]:after { content: attr(data-icon); width: 200px; height: 200px; //background: #0f0; color: #fff; font-size: 90px; text-align: center; line-height: 200px; position: absolute; left: 50%; top: 50%; -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -ms-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%); transform: rotate(-45deg) translateY(25%); margin: -100px 0 0 -100px; font-family: "Raphaelicons"; text-shadow: 1px 3px 13px rgba(151, 24, 64, 0.2); } .st-panel h2 { color: #e23a6e; font-size: 54px; line-height: 50px; text-align: center; font-weight: 900; width: 80%; position: absolute; left: 10%; top: 50%; margin-top: -90px; text-shadow: 1px 3px 3px rgba(151, 24, 64, 0.2); -webkit-backface-visibility: hidden; } #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2 { -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards; -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards; animation: moveDown 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveDown { 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes moveDown { 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-o-keyframes moveDown { 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-ms-keyframes moveDown { 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes moveDown { 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } .st-panel p { width: 50%; position: absolute; left: 25%; top: 50%; font-size: 16px; line-height: 22px; padding: 0px; text-align: center; -webkit-backface-visibility: hidden; color: #8b8b8b; margin-top: 10px; } #st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p { -webkit-animation: moveUp 5.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards; -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards; animation: moveUp 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(80px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes moveUp { 0% { -webkit-transform: translateY(80px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-ms-keyframes moveUp { 0% { -webkit-transform: translateY(80px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-o-keyframes moveUp { 0% { -webkit-transform: translateY(80px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes moveUp { 0% { -webkit-transform: translateY(80px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } /*细节*/ .st-color { background: #fa96b5; } .st-color .st-desc { background: #fff; } .st-color [data-icon]:after { color: #fa96b5; } .st-color h2 { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } .st-color p { color: rgba(255, 255, 255, 0.8); } /*响应式*/ @media screen and (max- 520px) { .st-panel h2 { font-size: 42px; } .st-panel p { width: 90%; left: 10%; margin-top: 0px; } .st-container > a { font-size: 13px; } } @media screen and (max- 360px) { .st-panel h2 { font-size: 30px; } .st-panel p { width: 90%; left: 10%; margin-top: 0px; } .st-container > a { font-size: 10px; } .st-desc { width: 120px; height: 120px; margin-left: -60px; } } [data-icon]:after { font-size: 60px; -webkit-transform: rotate(-45deg) translateY(15%); -moz-transform: rotate(-45deg) translateY(15%); -ms-transform: rotate(-45deg) translateY(15%); -o-transform: rotate(-45deg) translateY(15%); transform: rotate(-45deg) translateY(15%); } } </style> </head> <body> <div class='container'> <!-- 导航 --> <div class='st-container'> <!-- nav begin --> <input type="radio" name="radio-set" checked="checked" id="st-control-1" /> <a href="#st-panel-1">Serendipity</a> <input type="radio" name="radio-set" id="st-control-2" /> <a href="#st-panel-2">Happiness</a> <input type="radio" name="radio-set" id="st-control-3" /> <a href="#st-panel-3">Tranquillity</a> <input type="radio" name="radio-set" id="st-control-4" /> <a href="#st-panel-4">Positivity</a> <input type="radio" name="radio-set" id="st-control-5" /> <a href="#st-panel-5">Passion</a> <!-- nav end --> <div class="st-scroll"> <section class="st-panel " id="st-panel-1"> <!-- 图片 --> <div class="st-desc" data-icon="H"> </div> <h2>Serendipity</h2> <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd fature nisi,commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel st-color" id="st-panel-2"> <!-- 图片 --> <div class="st-desc" data-icon="2"> </div> <h2>Happiness</h2> <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd fature nisi,commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel" id="st-panel-3"> <!-- 图片 --> <div class="st-desc" data-icon="B"> </div> <h2>Tranquillity</h2> <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd fature nisi,commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel st-color" id="st-panel-4"> <!-- 图片 --> <div class="st-desc" data-icon="S"> </div> <h2>Positivity</h2> <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd fature nisi,commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel" id="st-panel-5"> <!-- 图片 --> <div class="st-desc" data-icon="G"> </div> <h2>Passion</h2> <p>Banksy adipisicing eiusmod banh mi sed.Squid stumptown est odd fature nisi,commodo mlkshk pop-up adipisicing retro.</p> </section> </div> </div> </div> </body> </html>