<!DOCTYPE html><html> <title>css3平滑過渡頁面</title> <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, user-scalable=no, minimal-ui" /> <link href="css/fonts.css" rel="stylesheet" type="text/css"> <link href="css/normalize.css" rel="stylesheet" type="text/css"> <link href="css/layout.css" rel="stylesheet" type="text/css"> <style> @charset "utf-8"html{height:100%; ?}?body{ margin:0;padding:0;height: 100%; background:#ddd; font-weight:400; font-size:15px; color:#333; overflow:hidden; -webkit-font-smoothing: antialiased; }a{ text-decoration:none; color:#555;}.ctr{ width:0; height: 0;overflow:hidden; clear: both; margin:0;padding:0;}.header{ }.nav{ width:100%; height: 100px; position:absolute; left:0; top:0; ?}.nav ?input,.nav a{width:20%; height: 35px; line-height:35px; position:fixed; bottom:0; cursor: pointer;}.nav input{ ?opacity:0; z-index:1000;}.nav a{z-index:10; font-weight:700px; font-size:16px; background: red; color:#fff; text-align:center; text-shadow:1px 1px 1px rgba(151,24,64,0.2);}#nav_1,#nav_1 +a{left:0;}#nav_2,#nav_2 + a{left:20%;}#nav_3,#nav_3 + a{left:40%;}#nav_4,#nav_4 + a{left:60%;}#nav_5,#nav_5 + a{left:80%;}.nav input:checked + a,.nav input:checked:hover + a{ background:#821134;}.nav input:checked + a:after{content:""; width:0; height:0;position: absolute;bottom: 100%; left:50%; margin-left: -20px; overflow:hidden; border:20px solid transparent; border-bottom-color: #821134;}.nav input:hover +a{ background: #AD244f}/*banner*/.banner,.st_panel{width:100%; height:100%; position: relative;}.banner{? 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;}.st_panel{ background: #fff; overflow:hidden; border:1px #000 solid;}#nav_1:checked ~.banner{ -webkit-transform:translateY(0%); -moz-transform:translateY(0%); -o-transform:translateY(0%); -ms-transform:translateY(0%); transform:translateY(0%);}#nav_2:checked ~.banner{ -webkit-transform:translateY(0%); -moz-transform:translateY(0%); -o-transform:translateY(0%); -ms-transform:translateY(0%); transform:translateY(0%);} </style> <head> <body> <div class="header"> <div class="nav"> <!--導航開始--> <input type="radio" name="radio_set" checked="cheched" id="nav_1"> <a href="#st_panel_1">首頁</a> <input type="radio" name="radio_set" ?id="nav_2"> <a href="#st_panel_2">工作經(jīng)驗</a> <input type="radio" name="radio_set" ?id="nav_3"> <a href="#st_panel_3">項目</a> <input type="radio" name="radio_set" ?id="nav_4"> <a href="#st_panel_4">擅長技術</a> <input type="radio" name="radio_set" ?id="nav_5"> <a href="#st_panel_5">聯(lián)系方式</a> <!--導航結束--> ? <!--banner開始--> <div class="banner"> <section class="st_panel" id="st_panel_1"> <div class="st_desc" data-iocn="H"></div> <h2>首頁</h2> <p>11111</p> </section> <section class="st_pane1 st_color" id="st_panel_2"> <div class="st_desc" data-iocn="2"></div> <h2>工作經(jīng)驗</h2> <p>22222</p> </section> <section class="st_pane1" id="st_panel_3"> <div class="st_desc" data-iocn="3"></div> <h2>項目</h2> <p>33333</p> </section> <section class="st_pane1 st_color" id="st_panel_4"> <div class="st_desc" data-iocn="4"></div> <h2>擅長技術</h2> <p>44444</p> </section> <section class="st_pane1" id="st_panel_5"> <div class="st_desc" data-iocn="5"></div> <h2>聯(lián)系方式</h2> <p>555555</p> </section> </div> <!--banner結束--> ? ?</div> </div> </body> </head></html>
- 1 回答
- 0 關注
- 2420 瀏覽
添加回答
舉報
0/150
提交
取消