如何用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"