css3网页设计公开课源码与笔记第二天

1、传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash四种技能 传智播客 网页平面设计学院 只花一份钱，同时掌握网页、平面、UI、Flash四种技能 CSS3 公开课第二天 透过淘宝去看CSS3主讲教师：刘晓强传智播客 网页平面设计学院 HYPERLINK 发布 目录 TOC o 1-3 h u HYPERLINK l _Toc14461 1.1 2d 转换 ： transform PAGEREF _Toc14461 3 HYPERLINK l _Toc17805 1.2 过渡 transition PAGEREF _Toc17805 3 HYPERLINK l _Toc

2、1694 1.3 CSS3 圆角效果 PAGEREF _Toc1694 5 HYPERLINK l _Toc8089 1.4 CSS3 盒子阴影效果 box-shadow PAGEREF _Toc8089 6 HYPERLINK l _Toc16717 1.5 内核前缀： PAGEREF _Toc16717 6 HYPERLINK l _Toc21172 1.6 字体图标 PAGEREF _Toc21172 7 HYPERLINK l _Toc17831 1.7 字体图标使用三部曲： PAGEREF _Toc17831 8 HYPERLINK l _Toc5961 1.7.1 1.先从网上下载

3、字体; PAGEREF _Toc5961 8 HYPERLINK l _Toc805 1.7.2 声明字体 PAGEREF _Toc805 8 HYPERLINK l _Toc15549 1.7.3 3引用字体 PAGEREF _Toc15549 9复习： Css3 比较重要的知识点： 2d 转换 ： transform Deg 度数 Transform：rotate(90deg) 当我们的鼠标，经过这个图片的时候，才旋转180度。以前js 和CSS分工很明确Js 就是行为 做特效（交互动画）CSS 样式 做美化 CSS3也可以做动画 出现了 js 和CSS 他们的代沟很小了。 过渡 tran

4、sitionTransition:要变化的属性名称 需要花费的时间 运动方式 何时开始； 要变化的属性名称： width height transform运动方式：注意：1.transition 通常和 hover 配合使用。2. 时间的单位是s 所以，时间后面必须加s例如：0.25s何时开始 如果是0s ，当鼠标放上去立马执行。 4。 里面如果连写中间用逗号隔开。 例如：transition:box-shadow 0.3s ease-in 0s,transform 0.3s ease-in 0s;建议： 我们能用CSS做的，就不要用js去做，因为js 的执行效率太低了。提问：你眼中的盒子都是

5、什么形状的。CSS3 圆角效果 Border-radius:参数；参数的单位可以使绝对的像素(px)也可以用相对单位(%)Border-radius: 左上角 右上角 右下角 左下角；CSS3 盒子阴影效果 box-shadowBox-shadow:水平阴影位置 垂直阴影位置 模糊（羽化）距离 阴影大小（尺寸） 阴影的颜色 内阴影/外阴影; 创新=模仿+改良注意： 默认的是外侧阴影（outset），这里我们需要内侧阴影（inset）因为边框都是实线 阴影有模糊的效果Css 层叠样式表Css3 是很好，但是里面很多地方浏览器不兼容需要我们根据浏览器的内核添加前缀。内核前缀：火狐浏览器 -moz-

6、谷歌和苹果 -webkit-Ie9以及以上版本 -ms-欧朋 -o-早期的苹果浏览器（safari） linux konqueror(征服者)需要加：-khtml-谷歌2013 自己开发了新的内核 blink 但是前缀还是-webkit-字体图标 以后的主流逐渐会用图标字体代替精灵图（小强老师预计）把一些图标放入自定字体中，然后使用字体替代普通图标的技术。好处：1 可以自由更改大小 颜色 2.添加阴影 3 ie6完全支持（ie4就开始支持）font-face 从css2 支持的 但是 css2.1 版本的给删掉了到了CSS3 又给加上了。同样也有缺点哈：比如现在只能是纯色。 比如制作的时候稍微

7、麻烦字体图标使用三部曲： 1.先从网上下载字体; Icomoon.io I 阿里巴巴字体库 声明字体 font-face font-family: iconfont; /* 这里自定义字体标题*/ src: url(iconfont.eot); /* IE9*/ src: url(iconfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */url(iconfont.woff) format(woff), /* chrome、firefox */ url(iconfont.ttf) format(truetype), /* chrom

8、e、firefox、opera、Safari, Android, iOS 4.2+*/url(iconfont.svg#uxiconfont) format(svg); /* iOS 4.1- */小强老师注释： 因为声明字体需要照顾所有浏览器 因此，声明字体稍微麻烦。3引用字体无标题文档font-face font-family: xiaoqiang; src: url(fonts/icomoon.eot); /* IE9*/ src: url(fonts/icomoon.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */url(fonts/icomoon.woff) format(woff), /* chrome、firefox */ url(fonts/icomoon.ttf) format(truetype), /* chrome、firefox、opera、Safari, A