                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

不能全屏这个问题，看完了下面所有解决方法一个一个试了怎么我是不能全屏呢

css样式：

html,body,.container,.st-container{height:100%;}

a{ text-decoration:none;

color:#555;

}

.clr{ width:0;

height:0;

overflow:hidden;

clear:both;

padding:0;

margin:0;

}

.st-container{

width:100%;

height:100%;

position:absolute;

overflow:hidden;

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;

font-weight:700;

font-size:16px;

background:#e23a6e;

text-align:center;

color:#fff;

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

}

#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:#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:#AD244F;

}

.st-scroll,

.st-panel{

width:100%;

height:100%;

position:relative;

color:red;background:#333;

left:0%;top:0%;

}

结构：

<body>

<div class="container">

<div class="st-container">

<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">Positivity</a>

<input type="radio" name="radio-set" id="st-control-5">

<a href="#st-panel-5">Herendipity</a>

<div class="st-scroll">

<div class="st-panel" id="st-panel-l">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel st-color" id="st-panel-2">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel" id="st-panel-3">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel st-color" id="st-panel-4">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

<div class="st-panel" id="st-panel-5">

<div class="st-deco" data-icon="H"></div>

<h2>Serendipity</h2>

<p>Banksy adipisicing eiusujj mi sed Squid stmpt fffdf sdsdgf ffee eregg</p>

</div>

</div>

</div>

</div>

</body>

ffffff追风筝的人

2016-01-19

源自：css3实现网页平滑过渡效果 2-2

关注问题我要回答

15102

操作

收起

5 回答

最不强程序员
2016-12-15

<body>

<div class="container">

<div class="container-st">

<input type="radio" id="set-1" name="set-radio" checked="checked"><a href="#set-1">汪大东</a></input>

<input type="radio" id="set-2" name="set-radio"><a href="#set-2">雷霆</a></input>

<input type="radio" id="set-3" name="set-radio"><a href="#set-3">中万钧</a></input>

<input type="radio" id="set-4" name="set-radio"><a href="#set-4">球球</a></input>

<input type="radio" id="set-5" name="set-radio"><a href="#set-5">那个谁？</a></input>

</div>

</div>

<div class="st-scroll">

<section class="st-panel" id="set-1">

<div class="st-desc" data-icon="H"></div>

<h2>汪大东</h2>

<p>233333333333333333333333333333333333333</p>

</section>

<section class="st-panel st-color" id="set-2">

<h2>雷霆</h2>

<p>233333333333333333333333333333333333333</p>

</section>

<section class="st-panel" id="set-3">

<div class="st-desc" data-icon="H"></div>

<h2>中万钧</h2>

<p>233333333333333333333333333333333333333</p>

</section>

<section class="st-panel st-color" id="set-4">

<div class="st-desc" data-icon="H"></div>

<h2>球球</h2>

<p>233333333333333333333333333333333333333</p>

</section>

<section class="st-panel" id="set-5">

<div class="st-desc" data-icon="H"></div>

<h2>那个谁？</h2>

<p>233333333333333333333333333333333333333</p>

</section>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

#1

慕运维8472838

老师的代码是没有分开的导航和内容大块都在一个container里面

2018-06-04 回复有任何疑惑可以回复我~

最不强程序员
2016-12-15

不能全屏是因为导航条的div和上面内容的div必须要分开定义

0 回复有任何疑惑可以回复我~

qq_鸠羽千夜_0
2016-10-23

我的跟你一模一样就是不能全屏不知道哪里出现问题了

0 回复有任何疑惑可以回复我~

不打伞的人
2016-04-06

给container定义height：100%

我就是这样解决的

0 回复有任何疑惑可以回复我~

Eyeland
2016-01-20

不能全屏基本是父元素没定义100% 自己看看是不是吧

1 回复有任何疑惑可以回复我~

#1

父元素都定义 height：100%，然而还是没有全屏

2016-08-18 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

css3实现网页平滑过渡效果

参与学习 54371 人
解答问题 372 个

CSS3 打造页面之间的平滑过渡效果，带来神奇的体验

本课相似问答

3 回答不能全屏的看这里~

2 回答不能全屏的问题有答案了吗？

2 回答还有谁解决了全屏的问题？

2 回答不能全屏啊

7 回答全屏问题已解决

搜索更多本课相关问答

不能全屏这个问题，看完了下面所有解决方法一个一个试了怎么我是不能全屏呢

我要回答关注问题

意见反馈帮助中心 APP下载