css3实现网页平滑过渡效果_技术问答

慕粉4279295

浏览器兼容性: 2019-04-23 1回答·1247浏览

小博要上进

只想要切换效果的那个画面，只要图片，不要那些css样式和段落的怎么弄？老师可以一天内解答吗，挺急的: 网上找了源码解决了; 2018-06-13 2回答·1299浏览

qq_醉情_0

有谁知道为什么老师讲解的网址#id怎么去掉了？有#id名称怎么去掉？网址不利于刷新，求各位大能解答: 发代码吧有点看不懂问什么; 2018-05-11 1回答·1206浏览

玩名堂s

translateY(-100%)不应该是往上平移么，怎么是往下?: 页面就像直角坐标系第四象限; 2018-05-06 1回答·2428浏览

Suuuuper_

为什么照着写的代码，但是不能进行页面的跳转: 2018-04-05 2回答·1567浏览

慕侠012607

我为什么给transform前一加上内核就提示出错呢...求解: 是不是写错了; 2018-03-15 1回答·1140浏览

花生果

不能切换！！

#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%);

}

2017-08-16 2回答·1274浏览

花生果

为什么我的不能切换？？: 你仔细看看切换的那部分代码，不知道你html怎么写的; 2017-08-15 1回答·1190浏览

慕设计6098324

我用ul li 包裹了input，导致section的滚动失效，有办法解决吗？

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

2017-07-16 1回答·1846浏览

qq_o朩孒雪o_0

.st-panel{ background: #fff; overflow: hidden; }导航不显示: 2017-05-08 3回答·790浏览

来自火星的花

换页显示没有效果

.st-container{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

font-family: Arial,sans-serif;

}

2017-03-30 2回答·1149浏览

MURUSHIER

锚点有应用吗: 并没有吧; 2017-03-27 1回答·684浏览

naME3364004

怎样使panel横向排列: 设置宽高,再float:left就能横向排列. 但是横向排列在这种布局不大合适.; 2017-01-19 1回答·1498浏览

Ethan_8

菜单可以正常操作，点击文字页面无法切换，点伪类after生成的三角可以切换是为啥？

<!-- 导航条开始 -->
	<div class="container">
		<div class="st-container">
			<input name="radio-set" type="radio" id="st-control-1" checked="checked"/>
			<a href="#st-panel-1">第一个链接</a>
			<input name="radio-set" type="radio" id="st-control-2"/>
			<a href="#st-panel-2">第二个链接</a>
			<input name="radio-set" type="radio" id="st-control-3"/>
			<a href="#st-panel-3">第三个链接</a>
			<input name="radio-set" type="radio" id="st-control-4"/>
			<a href="#st-panel-4">第四个链接</a>
			<input name="radio-set" type="radio" id="st-control-5"/>
			<a href="#st-panel-5">第五个链接</a>
		</div>		
	</div>
<!-- 导航条结束 -->

<!-- 切换主体内容开始 -->
    <div class="st-scroll">
    	<section class="st-panel" id="st-panel-1">
	    	<div class="st-desc" data-icon="H"></div>
    		<h2>1主体文本标题</h2>
    		<p>这里填写主要的文本里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内里填写主要的文本内内容</p>
    	</section>

    	<section class="st-panel st-color" id="st-panel-2">
	    	<div class="st-desc" data-icon="H"></div>
    		<h2>2主体文本标题</h2>
    		<p>这里填写主要的文本内容</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;
}

/*内容区*/

.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%);
}

2017-01-10 1回答·772浏览

我是xiaohaideyin

终于完成了很开心: 加油，go on; 2016-12-05 2回答·699浏览

慕运维4918896

不知道为什么不能切换

<div class="containt">
<div class="head">
<input type="radio" name="sub_nav" id="sub1" checked="checked"><a href="#navct1">SUNDAY</a>
<input type="radio" name="sub_nav" id="sub2"><a href="#navct2">FRIDAY</a>
<input type="radio" name="sub_nav" id="sub3"><a href="#navct3">MONDAY</a>
<input type="radio" name="sub_nav" id="sub4"><a href="#navct4">SATARDAY</a>
<input type="radio" name="sub_nav" id="sub5"><a href="#navct5">febraday</a>
</div>
<div class="panelct">
<section class="panel" id="navct1">内容一11111111111</section>
<section class="panel" id="navct2">内容二2222222222222222222</section>
<section class="panel" id="navct3">内容三3333333333333</section>
<section class="panel" id="navct4">内容四444444444444</section>
<section class="panel" id="navct5">内容五55555555555555</section>
</div>

</div>

body,div,input,a{padding: 0;margin: 0}

body{

font-size: 15px;

font-weight: 400;

color: #333;

overflow: hidden;

font-smoothing:antialiased;

}

body,html{

height: 100%;

width: 100%

}

.containt{

width: 100%;

height: 100%;

}

.head{

width: 100%;

}

.head > input,.head >a{

width: 20%;

height: 40px;

line-height: 40px;

position: fixed;

bottom: 0;

text-align: center;

cursor: pointer

}

.head > input{

z-index: 99;

opacity: 0;

position: absolute;

bottom: 0;

}

.head > a{

position: absolute;

bottom: 0;

z-index: 10;

font-size: 20px;

line-height: 40px;

background: #e23a6e;

text-decoration: none;

color:#fff;

font-weight: 700;

text-shadow: 1px 1px 1px rgba(151,24,64,0.2)

}

#sub1,#sub1+a{

left: 0%;

}

#sub2,#sub2+a{

left: 20%;

}

#sub3,#sub3+a{

left: 40%;

}

#sub4,#sub4+a{

left: 60%;

}

#sub5,#sub5+a{

left: 80%;

}

.head input:checked + a{

background: #821134

}

/*动态生成小三角*/

.head input:checked + a:after{

content: "";

height: 0;

width: 0;

overflow: hidden;

border: 20px solid transparent;

border-bottom-color:#821134;

position: absolute;

bottom:100%;

left: 50%;

margin-left: -20px

}

.panelct,.panel{

width: 100%;

height: 100%;

position: relative;

}

.panelct{

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-backface-visibility: hidden;

-ms-backface-visibility: hidden;

backface-visibility: hidden;

}

.panel{

background: #fff;

overflow: hidden;

}

#sub1:checked ~ .panelct{

-webkit-transform: translateY(0%);

-moz-transform: translateY(0%);

-o-transform: translateY(0%);

-ms-transform: translateY(0%);

transform: translateY(0%);

}

#sub2:checked ~ .panelct{

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

-o-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);

}

#sub3:checked ~ .panelct{

-webkit-transform: translateY(-200%);

-moz-transform: translateY(-200%);

-o-transform: translateY(-200%);

-ms-transform: translateY(-200%);

transform: translateY(-200%);

}

#sub4:checked ~ .panelct{

-webkit-transform: translateY(-300%);

-moz-transform: translateY(-300%);

-o-transform: translateY(-300%);

-ms-transform: translateY(-300%);

transform: translateY(-300%);

}

#sub5:checked ~ .panelct{

-webkit-transform: translateY(-400%);

-moz-transform: translateY(-400%);

-o-transform: translateY(-400%);

-ms-transform: translateY(-400%);

transform: translateY(-400%);

}

2016-10-27 2回答·1072浏览

一只特立独行的doge

页面切换没有效果: 2016-10-22 2回答·1156浏览

慕标1909118

导航页面切换的: 2016-09-12 2回答·972浏览

慕斯3035540

求大神指点迷津！！！！为什么.st-scroll已经设置width100%，height100%，然后最后会是st-scroll来移动啊？？？？: 这个我也没有想明白，不应该是往下移动吗，怎么会是往上走的，，，; 2016-09-04 3回答·1021浏览

ZMCZX

导航栏切换问题

已采纳慕粉_郎朗的回答

-webkit-transition:all 0.6s ease-in-out 0.1s backward;

加上浏览器内核

2016-07-13 1回答·958浏览

qweqwe13123123

不知道有谁做好了这个案例的吗？求一份代码发我邮箱873241789@qq.com: 2016-05-17 1回答·397浏览

睡觉青蛙

高度有问题，还有无法跳转

Input：checked~scroll

~波浪选择器只适用于同级，要把section这个大div放到input这个父级的下面就可以了

2016-04-25 3回答·795浏览

KIKI_思

无法实现切换: 2016-04-18 4回答·1201浏览

YiQing_偉傑

backface-visibility：hidden: backface-visibility 属性定义当元素不面向屏幕时是否可见。; 2016-01-21 1回答·895浏览

qq_慕容5333349

页面切换问题: 波浪选择器只适用于同级元素！！！; 2016-01-12 3回答·1135浏览

Elizebath

页面切换问题: 已解！; 2016-01-01 1回答·783浏览

栄篱

则图片切换的原理呀真还没有真正领悟，哪大神可以再详细的讲解一番吗？: 已采纳 echo_kinchao 的回答; 你要把浏览器想成是一个三维的房间当CSS3引入的时候浏览器这个世界瞬间就一下子超乎了我们的想象以前都是以中心点出发当然我们自己也可以设立中心点建议还是多做点小的练习慢慢的就会懂得了~; 2015-12-16 2回答·907浏览

leaylone

为什么360浏览器不能切换，在谷歌里面切换没有那个滑动效果: 360的内核是IE IE8不支持css3; 2015-10-30 2回答·1077浏览

_heyujun

中部波浪线怎么打: 已采纳 qq_流年朝朝_0 的回答; 键盘第二排第一个，按住shift键一起按; 2015-10-27 1回答·1272浏览

不含糖

点击导航无法切换: 已采纳慕仔4484760 的回答; .st-scroll 应该放在input下面也是放在st-container里面; 2015-09-13 2回答·1315浏览