                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /CSS3
                        
                        /css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果

菜單可以正常操作，點(diǎn)擊文字頁(yè)面無(wú)法切換，點(diǎn)偽類(lèi)after生成的三角可以切換是為啥？

具體情況如標(biāo)題描述，菜單可以選擇變色，但是點(diǎn)擊之后scroll無(wú)法移動(dòng)，只有點(diǎn)擊三角才可以，估計(jì)是A標(biāo)簽?zāi)睦飳?xiě)的有問(wèn)題，但是又找不到，請(qǐng)高手指點(diǎn)一二，謝啦

Ethan_8

2017-01-10

源自：css3實(shí)現(xiàn)網(wǎng)頁(yè)平滑過(guò)渡效果 2-3

關(guān)注問(wèn)題我要回答

755

操作

收起

1 回答

Ethan_8 提問(wèn)者
2017-01-10

<!--?導(dǎo)航條開(kāi)始?-->
	<div?class="container">
		<div?class="st-container">
			<input?name="radio-set"?type="radio"?id="st-control-1"?checked="checked"/>
			<a?href="#st-panel-1">第一個(gè)鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-2"/>
			<a?href="#st-panel-2">第二個(gè)鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-3"/>
			<a?href="#st-panel-3">第三個(gè)鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-4"/>
			<a?href="#st-panel-4">第四個(gè)鏈接</a>
			<input?name="radio-set"?type="radio"?id="st-control-5"/>
			<a?href="#st-panel-5">第五個(gè)鏈接</a>
		</div>		
	</div>
<!--?導(dǎo)航條結(jié)束?-->

<!--?切換主體內(nèi)容開(kāi)始?-->
????<div?class="st-scroll">
????	<section?class="st-panel"?id="st-panel-1">
	????	<div?class="st-desc"?data-icon="H"></div>
????		<h2>1主體文本標(biāo)題</h2>
????		<p>這里填寫(xiě)主要的文本里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)里填寫(xiě)主要的文本內(nèi)內(nèi)容</p>
????	</section>

????	<section?class="st-panel?st-color"?id="st-panel-2">
	????	<div?class="st-desc"?data-icon="H"></div>
????		<h2>2主體文本標(biāo)題</h2>
????		<p>這里填寫(xiě)主要的文本內(nèi)容</p>
????	</section>

====================以下是CSS=====================

html{
	width:?100%;
	height:?100%;
	margin:?0;
	padding:0;

}
body{
	width:?100%;
	height:?100%;
	margin:?0;
	padding:0;
	background-color:?#034;
	font-weight:?400;
	font-size:?15px;
	color:#333;
	/*overflow:?hidden;*/
	-webkit-font-smoothing:antialiastd;
	???-moz-font-smoothing:antialiastd;
	????-ms-font-smoothing:antialiastd;
	?????-o-font-smoothing:antialiastd;
	????????font-smoothing:antialiastd;
}
a{
	text-decoration:?none;
	color:#fff;
}
.clr{
	width:?0;
	height:?0;
	overflow:?hidden;
	clear:both;
	padding:?0;
	margin:?0;
}
.st-container{
	width:?100%;
	height:?100%;
	position:?absolute;
	left:?0;
	top:?0;
}

.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;
	background-color:?#e23a6e;
	text-align:?center;
	text-shadow:?1px?1px?1px?rgba(2,2,233,.5);
	
}
#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-color:?#821134;

}
.st-container?input:checked?+?a:after{
	content:?"";
	width:?0;
	height:?0;
	overflow:?hidden;
	border:?20px?solid?transparent;
	border-bottom-color:#821134;
	position:?absolute;
	bottom:100%;
	left:50%;
	margin-left:?-20px;
}
.st-container?input:hover?+?a?{
	background-color:?#ad244f;
}

/*內(nèi)容區(qū)*/

.st-scroll,?.st-panel{
	width:?100%;
	height:?100%;
	background-color:?#fff;
}

.st-scroll?{
	left:?0;
	top:0;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:?hidden;
}

.st-panel{
	background-color:?#fff;
	overflow:?hidden;
}

#st-control-1:checked?~?.st-scroll{
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-ms-transform:translateY(0%);
	-o-transform:translateY(0%);
	transform:translateY(0%);
}

#st-control-2:checked?~?.st-scroll{
	-webkit-transform:translateY(-200%);
	-moz-transform:translateY(-200%);
	-ms-transform:translateY(-200%);
	-o-transform:translateY(-200%);
	transform:translateY(-200%);
}