css3实现网页平滑过渡效果

原创 2015年07月09日 13:54:06

截图



思路:

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代码











 

版权声明:本文为博主原创文章,未经博主允许不得转载。

css3 Transition属性(平滑过渡菜单栏案例)

css3的制作动画的三大属性(Transform,Transition,Animation)下面介绍一下 Transition属性。transition属性是一个速记属性有四个属性:transitio...
  • yy211zhu
  • yy211zhu
  • 2016年10月27日 14:30
  • 2062

纯css3实现页面平滑过渡

css3实现页面平滑过渡
  • itSeven7
  • itSeven7
  • 2017年03月22日 10:22
  • 1209

CSS3制作各种平滑过渡的动画效果

通过CSS3的新特性,我们可以不使用javascript或Flash就可以将元素从一个状态过渡到另一个状态。它允许元素在指定的时间里改变它们的值,使各种可以动画的属性执行动画效果。 ...
  • natalie86
  • natalie86
  • 2015年04月10日 19:57
  • 3328

css3 实现网页的淡入效果

用css3的animation动画属性实现网页的淡入,主要点在于改变页面的opacity属性。 Document @keyframes fadein{ 0%{opac...
  • u013993319
  • u013993319
  • 2016年09月24日 11:36
  • 2501

【CSS3】transition过渡和animation动画

写在前面的话: 之前实习的时候,刚开始的第一个月就是在研究CSS3的动画,因为要做转盘抽奖活动,预研的时候,我是用Canvas来画的,当时为了一个问题“如何使用canvas让图片围绕中心点旋转”折...
  • XIAOZHUXMEN
  • XIAOZHUXMEN
  • 2016年07月23日 11:06
  • 22978

CSS3 实现页面平滑过渡

  • 2015年05月22日 23:40
  • 125KB
  • 下载

css3实现网页平滑过渡效果

截图 思路: 1、导航利用来判断点击的元素 通过input:checked+a{}来为当前的元素添加样式 2、顶部的三角,利用正方形div,旋转45度,再隐藏部分 3、顶部的icon,下...
  • wangjiaohome
  • wangjiaohome
  • 2015年07月09日 13:54
  • 2271

CSS3实现过渡效果 (transition)

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的 动画。...
  • actorWen
  • actorWen
  • 2017年12月14日 10:09
  • 214

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好。于是我们主管叫我用jquery mobile,可是用了这个库之后,问题...
  • u011011025
  • u011011025
  • 2015年06月29日 16:56
  • 2020

CSS3实现网页平滑过渡效果

  • 2016年01月07日 09:25
  • 236KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3实现网页平滑过渡效果
举报原因:
原因补充:

(最多只允许输入30个字)