css3实现网页平滑过渡效果

截图

思路：

1、导航利用input radio来判断点击的元素

通过input：checked+a{}来为当前的元素添加样式

2、顶部的三角，利用正方形div，旋转45度，再隐藏部分

3、顶部的icon，下载表现形式为图行的字体，利用@font-face{}导入字体，相比图片减少网页加载

4、载入时的平滑移动效果，利用移改变包含5个section的div的Y轴坐标实现滑动

5、载入时字体内容的动画效果，利用animation实现

知识点

1、

font-smoothing:antialiased;（代码21）
   功能：用于设置字体的光滑程度
  参数：none（用于小像素的文本）
            subpixel-antialiased(默认)
            antialiased(反锯齿)

2、

@font-face{}（代码204）

     功能：用于将自己定义的web字体嵌入到网页中
      属性: youWebFontName 引入字体的名字;  
              source 相对（绝对）路径
              format 字体格式，用来帮助浏览器识别
                   具体值 truetype (.ttf 格式)
                            opentype (.otf 格式)
                            truetype-aat (.woff 格式)
                            embedded-opentype( .eot 格式)
                            svg (.svg 格式)
      兼容性：ie6不支持
      字体下载：www.dafont.com,或www.google.com/webfonts

3、

backface-visibility:hidden;（代码119）
   定义元素不面向屏幕时是否可见
   参数： visible(可见)
              hidden（不可见）
4、

transition的动画需要事件去触发（如鼠标经过、点击）（代码344）
animation的动画不需要触发事件就可发生
 语法：

》定义动画名称

 @keyframes animationName（为创建的动画名称）{

        规定某项css样式，就能创建由当前样式逐渐改为新的样式的动画效果

     }

    兼容性 ie10+,firefox,opera支持animation
               safari ,chorme 支持 -webkit-animation
               IE9-不支持

》执行动画

  xx {
  animation: animationName duration timing-function delay  iteration-count（播放次数）direction（方向）;

   }

name//自定义的动画名

duration//规定过渡需要的时间（单位s/ms）

timing-function//规定速度效果

  1、ease：（逐渐变慢）默认值

  2、linear：（匀速）

  3、ease-in：(加速)

  4、ease-out：（减速）

  5、ease-in-out：（加速然后减速）

  6、cubic-bezier：（该值允许你去自定义一个时间曲线） (x1, y1, x2, y2)四个值特定于曲线上点P1和点 P2。所有值需在[0, 1]区域内，否则无效。

delay//定义效果何时开始

iteration-count//播放次数,默认一次， infinite表无限循环

Html代码

 


CSS代码