css3实例入门分享

github地址:https://github.com/szriafan/css3-demo.git。该工程是我在公司做css3实例入门分享用来演示的,用一个实例通过Step by Step的形式来讲解css3的大部分新特性。

  • base.html制作了一个简单按钮,此处不涉及CSS3的内容;
  • 01-CSS3圆角.html实现了按钮圆角,主要讲解CSS3圆角;
  • 02-CSS3渐变.html实现了按钮背景的线性渐变填充,主要讲解CSS3渐变;
  • 03-CSS3文本阴影.html实现了按钮文本阴影,主要讲解CSS3文本效果;
  • 04-CSS3字体.html为按钮添加了字体图标,主要讲解CSS3 字体;
  • 05-CSS32D转换.html为按钮添加了斜块,该斜块为下一步制作CSS3过渡作铺垫,主要讲解CSS3 2D 转换;
  • 06-CSS过渡.html为按钮添加了鼠标移过扫光的效果,主要讲解CSS3过渡;
  • 07-CSS3动画.html为按钮添加了开场扫光的效果,主要讲解CSS3动画;
  • 08-CSS3媒体查询.html中,使用CSS3查询器为不同尺寸屏幕的设备设置不同的动画时长,主要讲解CSS3媒体查询器;
  • 09-CSS3-JS.html主要讲解CSS3属性对应的JavasSript属性及CSS3事件;

CSS3 实例入门.pptx为本次分享所使用的PPT。

发表评论