如何用css3做全屏切换效果

今天从跟着网上一个老师用css3做了一个全屏切换效果，展示图如下：



当点击底部每一个导航时，对应的内容就变化，同时大标题往下，小文字向上。

其中有最重要的的是，

1.上部三角形的制作 ，每个三角形并不是一个图像，而是用特殊的文字做成 。

关键代码

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

[data-icon]:after {

content: attr(data-icon);

width: 200px;

height: 200px;

color: #fff;

font-size: 90px;

line-height: 200px;

text-align: center;

position: absolute;

left: 50%;

top: 50%;

margin-top: -100px;

margin-left: -50px;

-webkit-transform: translateY(25%) rotate(-45deg);

-moz-transform: translateY(25%) rotate(-45deg);

-o-transform: translateY(25%) rotate(-45deg);

-ms-transform: translateY(25%) rotate(-45deg);

transform: translateY(25%) rotate(-45deg);

font-family: "raphaelicons";

}

利用了after伪类，把字变成了图像，这里需要引用对应的文字资源。然后三角形其实是把正方形旋转，上部隐藏得到的。left,top50%就是居中显示，content属性不仅可以直接设置文字，还可以用attr。

2.如何让文字动起来 ，上面往下，下面网上

<h2>Happiness</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quo tenetur, amet, et consequatur dicta qui obcaecati sapiente blanditiis in quidem ducimus id odit. Voluptatum sequi in tenetur velit, nesciunt.</p>

#nav-control-1:checked ~ .nav-scroll #nav-panel-1 h2,

#nav-control-2:checked ~ .nav-scroll #nav-panel-2 h2,

#nav-control-3:checked ~ .nav-scroll #nav-panel-3 h2,

#nav-control-4:checked ~ .nav-scroll #nav-panel-4 h2,

#nav-control-5:checked ~ .nav-scroll #nav-panel-5 h2 {

-webkit-animation: moveDown 0.8s ease-in-out 0.4s backwards;

-o-animation: moveDown 0.8s ease-in-out 0.4s backwards;

-ms-animation: moveDown 0.8s ease-in-out 0.4s backwards;

-moz-animation: moveDown 0.8s ease-in-out 0.4s backwards;

animation: moveDown 0.8s ease-in-out 0.4s backwards;

}这里用的是animation动画，设置一个动画

@-webkit-keyframes moveDown {

0% {

-webkit-transform: translateY(-40px);

opacity: 0;

}

100% {

-webkit-transform: translateY(0px);

opacity: 1;

}

}

然后当页面加载0%和100%时分别让他向下向上运动。同理p标签。这里还要注意animation和transiton的区别。transition需要事件触发，animation不需要，是页面一加载就出现的。然后注意：transfrom:translate和transform:rotate等的用法。

3.页面是怎么根据点击的导航不同显示不同的三角形出来的。这里是用的radio标签，因为radio标签有一个：checked事件，可以判断是那个页面被选中了，从而显示该页面而隐藏别的页面。input设置其opacity为0，即可隐藏，然后设置其z-index优先。固定在底部就简单了，：postion：fixed,bottom:0;即可。

<input type="radio" name="radio-set" checked="checked" id="nav-control-1" />

<a href="#nav-panel-1">Happiness</a>

<input type="radio" name="radio-set" id="nav-control-2" />

<a href="#nav-panel-2">Attitude</a>

<input type="radio" name="radio-set" id="nav-control-3" />

<a href="#nav-panel-3">Energetic</a>

<input type="radio" name="radio-set" id="nav-control-4" />

<a href="#nav-panel-4">Positive</a>

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

<a href="#nav-panel-5">Health</a>

<!-- 导航结束 -->

<div class="nav-scroll">

<section class="nav-panel" id="nav-panel-1">

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

<h2>Happiness</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa quo tenetur, amet, et consequatur dicta qui obcaecati sapiente blanditiis in quidem ducimus id odit. Voluptatum sequi in tenetur velit, nesciunt.</p>

</section>

。。。。。。

定义字体的方法：

@font-face {

font-family: "raphaelicons";

src: url("fonts/raphaelicons-webfont.eot") format("eot"), url("fonts/raphaelicons-webfont.svg") format("svg"), url("fonts/raphaelicons-webfont.woff") format("woff"), url("fonts/raphaelicons-webfont.ttf") format("truetype");

font-weight: normal;

font-style: normal;

}

使用也是一样，font-family:"raphaelicons"