<!doctype html>
<html>
<head>
<title>CSS实现的页面平滑过渡</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">
<link href="http:fonts.googleapis.com/css?family=Josefin+Slab:400,700" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<div>
<!--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">Postitivity </a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">Passion </a>
<!--nav end -->
</div>
</div>
</body>
<html>
公共样式是自己写的,可以下载,主页面的样式需要自己手写样式表
超出的部分隐藏
transform是一个静态属性,如果想要实现滑动的动态效果可以用transiton或animation
可以的啊,检查下自己代码,或者贴出来。
<style type="text/css"> @font-face { font-family: 'myFont'; src: url('fonts/raphaelicons-webfont.eot'); src: url('fonts/raphaelicons-webfont.eot') format('embedded-opentype'), url('fonts/raphaelicons-webfont.woff') format('woff'), url('fonts/raphaelicons-webfont.ttf') format('truetype'), url('fonts/raphaelicons-webfont.svg') format('svg'); font-weight: normal; font-style: normal; </style>
radio放form中是为了向后台(服务器)提交用户的数据时用的,但这是案例是单纯为前端程序用的,所以可以不放在form中。