今天从跟着网上一个老师用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: tr