CSS3网页实现平滑过渡

今天在慕课网学习了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;
    }
}