css3课件

第一章 字体属性
1：css3属性具有兼容性，不兼容IE9以下浏览器，IE9部分兼容。

2：各大浏览器的内核兼容写法？

内核是浏览器的核心，作用是渲染页面

IE -ms-

火狐 -moz-

欧朋 -o-

谷歌 -webkit-

3:css3属性和标签更主要是用在移动端

4：文字阴影

text-shadow：x y blur color, …

参数

x 横向偏移

y 纵向偏移

blur 模糊距离

color 阴影颜色

文本阴影如果加很多层，会很卡很卡很卡

例子：

层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;

光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

5：文字描边

webkit-text-stroke strok:宽度 颜色

6:文字排列

direction  dairuokeshen  定义文字排列方式(全兼容)

rtl 从右向左排列

ltr 从左向右排列

注意要配合unicode-bidi:bidi-override; 一块使用

7：省略号

text-overflow 定义省略文本的处理方式

clip 无省略号

ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

举例：

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

第二章 背景属性
1:背景阴影：

box-shadow:x y 模糊度（可选） 颜色;

box-shadow: 20px 20px 20px yellow,30px 30px 30px green;

2:背景渐变：

分为2种：

普通渐变 linear 径向渐变 radial

/background:-webkit-linear-gradient(top,yellow,blue);/

/background:-webkit-linear-gradient(left,yellow,blue,green,pink);/

/background:-webkit-linear-gradient(top right,yellow,blue,green,pink);/

/background:-webkit-linear-gradient(top right,yellow 50%,blue 20%,green 30%,pink);/

/background:-webkit-linear-gradient(top,yellow 200px,blue 100px,);/

background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));*/

background: -webkit-radial-gradient(50%,yellow, red,blue,pink,green);*/

第三章 变形
transform:变换/变形

transition:1s all;

transition:过渡

translate:移动

translate(X px,Y px);

rotate:旋转/负值就是倒转;

rotate(-360deg);

scale:缩放

scale(x,y)

skew:扭曲

skew(x deg,y deg)

第四章 过渡
transition:过渡

过渡时间

transition-duration: 3s;

过渡属性(定义宽还是高)

transition-property: all;

过渡函数(运动的方式)

transition-timing-function: ease;

过渡延迟时间

transition-delay: 4s;运动方式

ease:开始和结束慢 中间快 相当于cubic-bezier(0.25, 0.1, 0.25,1)

ease-in:(加速) 开始慢 相当于cubic-bezier(0.42, 0, 1, 1)

ease-in-out：先加速后减速 cubic-bezier(0.42, 0, 0.58, 1)

ease-out:(减速) 结束慢cubic-bezier(0.42, 0, 1, 1)

linear:匀速 相当于cubic-bezier(0, 0, 0.58, 1)-webkit-transition: 2s width;

safari浏览器需要加前缀，-webkit- ,其他浏览器不需要添加

transition: 2s width, 4s height, 1s background-color;

transition: 2s width, 2s 2s height, 1s 4s background-color;

transition: 3s 2s width, 4s 2s height, 8s 4s background-color;

过渡： 时间 延迟时间 样式 方式

第五章 动画
动画属性

animation

animation-name:动画的名字

animation-duration:动画完成一个周期所花费的时间(秒/毫秒)

animation-timing-function:动画的速度曲线

(linear ease ease-in ease-out ease-in-out 贝塞尔曲线)

animation-delay:动画何时开始

animation-iteration-count:动画被播放的次数 number/infinite(无限循环)

animation-direction:动画是否在下一周期逆向的播放 normsl/alternate(反向播放)

animation-play-state:动画是否正在运行或暂停 paused(暂停)/running(正在播放)

animation-fill-mode:动画时间之外的状态

规定动画/帧数

@keyframes name{

from{}

to{}

}

@keyframes name{

0%{}

10%{}

20%{}

30%{}

40%{}

50%{}

60%{}

70%{}

100%{}

}/step-end:以跳跃方式运动/

/step-start 以跳跃方式运动/

第六章 3D
1：

transform-origin:基点

定义x轴的写法 :left/center/right/length/%

定义Y轴的写法 :top/center/bottom/20px/50%

transform-origin:x y;

2：

等价写法

transform: translate3d(30px,30px,800px)

transform:translateZ(800px) translateX(30px) translateY(30px);

transform:translateZ(800px) translate(30px,30px);

3:

transform-style:把2D转换成3D/ preserve-3d;

perspective: 像素px;

perspective 属性定义 3D 元素视图的距离，以像素计。

当元素定义 perspective 属性时，其子元素会获得透视效果

perspective翻译过来叫 景深