css实现全屏页面板块内容切换过渡动画效果代码-html代码-BFW代码库

css实现全屏页面板块内容切换过渡动画效果代码

代码语言：html

代码描述：css实现全屏页面板块内容切换过渡动画效果代码，使用css结合radio来实现，无js代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>css3实现的的页面平滑过渡效果</title>
    <link rel="stylesheet" href="css/css.css" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome =1" />
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <style>
        body {
    	font-family: "微软雅黑" serif;
    	background: #DDD;
    	font-weight: 400;
    	font-size: 15px;
    	color: #333;
    	overflow: hidden;
    	/*抗锯齿或者光滑度， 反锯齿效果，多用在英文字体上*/
    	
    	-webkit-font-smoothing: antialiased;
    }
   
    a {
    	text-decoration: none;
    	color: #555;
    }
    .clr {
    	widows: 0;
    	height: 0;
    	overflow: hidden;
    	clear: both;
    	padding: 0;
    	margin: 0;
    }
    /*导航 Start*/
    
    .st-container {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	left: 0;
    	top: 0;
    	font-family: "微软雅黑";
    }
    .st-container >input,
    .st-container >a {
    	width: 20%;
    	height: 50px;
    	line-height: 50px;
    	position: fixed;
    	bottom: 0;
    	cursor: pointer;
    	font-size: 20px;
    }
    .st-container > input {
    	opacity: .........完整代码请登录后点击上方下载按钮下载查看