今天在慕课网学习了CSS3网页实现平滑过渡的教程，这个视频是用纯CSS来实现的，没有用JS，还是学到了一些新的东西，这个项目看上去简单，但是有很多是相对新的技术。
网址是：https://www.imooc.com/video/7142
我第一次看见这两种选择器。
- 表示当前元素后面的那个元素
~ 表示当前元素后面所有的元素
#st-control-1,#st-control-1 + a{
left: 0%;
}
input:checked的意思是选中的那个input
第二个的意思是被选中的那个元素滑过的时候，背景颜色也是这个
.st-container input:checked + a,
.st-container input:checked:hover + a{
background: #821134;
}
页面的切换
页面切换是这个项目的重点，也是一个技术点，应该很常用。
这个技术的原理就是把浏览器想象成一个可移动窗口，外面有两块（或以上）和窗同样大小的布，然后这个窗口上下移动一个窗口的高度的距离，再加上@keyframes动画，这样就做成了翻页的效果。
下面是代码
#st-control-1:checked ~ .st-scroll{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-ms-transform:translateY(0%);
transform:translateY(0%);
}
#st-control-2:checked~.st-scroll {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
@font-face
@font-face是CSS3中的一个模块，主要用于将自己定义的Web字体嵌入到网页中。现在样式文件开头引入@font-face文件，然后下面就可以设置font-family属性来应用。
@font-face{
font-family: "Raphaelicons";
src:url(fonts/raphaelicons-webfont.eot) format('eot'),
url(fonts/raphaelicons-webfont.svg) format('svg'),
url(fonts/raphaelicons-webfont.ttf) format('truetype'),
url(fonts/raphaelicons-webfont.woff) format('woff');
font-weight: normal;
font-style: normal;
}
语法规则
@font-face {
font-family: <YourWebFontName>;
src: <source>[<format>][,<source> [<format>]]*;
[font-weight:<weight>];
[font-style:<style>];
}
还有一个比较新的知识点，就是data-icon。
例如设置图标，在节点里自定义设置data-icon=“A”，然后在样式文件设置这个图标。这个节点就会读取字体文件A对应的图标。这种方式应该是比用图片速度更快的，但是缺点是这些图标都只能用别人的，自己制作成本高。
<div class="st-desc" data-icon="A"></div>
[data-icon]:after{
content:attr(data-icon);
font-size: 90px;
text-align: center;
position: absolute;
font-family: "Raphaelicons";
}
CSS实现三角形
三角形非常常用，我也被面试过这题。如果面试前端一定要记住原理。
原理是容器的宽高为0，设置border为20px，透明。然后给border-bottom颜色。形成一个向上的三角形。想要哪个方向的三角形就给哪个boder颜色。配合伪类after一起使用。
.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;
}
老师提到，CSS3 中transition和animation最大的区别是，transition需要事件去触发，animation是不需要事件触发的，自动触发。
我觉得写animation是很麻烦的一件事，能用transition尽量会用transition.
transition
transition: all .6s ease-in-out;
animation
animation: name duration timing-function delay iteration-count direction;
-webkit-animation:moveDown 0.6 ease-in-out 0.2s backwards;
@-webkit-keyframes moveDown{
0%{
-webkit-transform: translateY(-40px);
opacity: 0;
}
100%{
-webkit-transform: translateY(0px);
opacity: 1;
}
}
