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翻译过来叫 景深
