CSS3学习笔记，渐变、过渡、动画等等。
文本
文本效果
word-wrap
长单词，拆分换行
word-wrap: normal|break-wrad
- normal：默认，长单词不会被拆分
- break-wrad：拆分换行
text-shadow
test-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow：水平阴影的位置（正或负）
- v-shadow：垂直阴影
- blur ：模糊距离
- spread ：
- color ：阴影的颜色
- inset：转换为内阴影
text-overflow
text-overflow: clip|ellipsis|string
- clip：直接修剪文本
- ellipsis：修剪文本，显示省略号
- string：修剪文本，显示给定字符串（例如：此次省略一万字）
字体
要考虑浏览器兼容问题。
渐变
LinearGradients-线性
线性渐变
linear-gradient(position,color1,color2,...)
- position：方向
- color：颜色
倾斜方向的渐变，先写竖直方向的top或bottom，再写水平方向的right或left。
RadialGradients-径向
径向渐变（圆形、椭圆）
radial-gradient(center,shape size,start-color,...,last-color)
作业-渐变背景动画
背景
background-size
background-origin
background-clip
边框&阴影
border-image
border-image属性，使用图片作为边框
1 |
border-image: url(img/xiao.png) repeat;/*repeat：重复；stretch：拉伸；round：铺满*/ |
盒子阴影
1 |
box-shadow: -15px 13px 20px #A5A5A5;/*x轴偏移，y轴偏移，模糊半径，阴影颜色（默认黑色）*/ |
还可以这样使用（写四个样式在一起）：
1 |
box-shadow: -15px 0 30px red,15px 0 30px yellow, 0 -15px 30px green, 0 15px 30px blue; |
文本阴影
text-shadow
文本阴影，用法与盒子阴影类似。
transition-过渡
语法
过渡属性
过渡时间
过渡效果（函数）
过渡延迟时间
触发
- hover
- 鼠标悬停
- active
- 激活（长按）（被选中的链接）
- focus
- 获取焦点
- link
- 链接未被访问时
- visited
- 常用于超链接（链接被访问后）
- checked
- 单/多选框被选中
使用步骤
transform-2D转换
更多关于transform的知识可以查看菜鸟教程。
变形函数
- translate()：平移
- scale()：缩放
- skew()：倾斜（会变形）
- rotate()：旋转（不会变形）
2D位移-translate
translate(x,y)：平移- translateX()：水平方向移动
- translateY()：垂直方向移动
只有一个值，默认水平方向。
2D缩放-scale
scale(x,y)：缩放。- x：水平方向缩放量（宽度）
- y：垂直方向缩放量（高度）
- 只有一个值时，x=y=该值
- （0，1）&&（1，正无穷）
2D倾斜-skew
skew(x,y)：倾斜（会变形）- x：水平方向倾斜角度
- y：垂直方向倾斜角度
2D旋转-rotate
- rotate()：旋转（不会变形）
- 只接受一个值
- 正：顺时针旋转
- 负：逆时针旋转
transform-3D转换
3D转换-属性
origin-位置
style-效果
子元素，是否保留3D效果
perspective-透视
子元素，透视效果（由具体值确定）
3D转换-方法函数
translate-移动
scale-缩放
小案例
animation-动画
写关键帧
animation关键帧动画语法，点这里。
应用到动画
direction-方向
fill-mode-状态
浏览器兼容
添加以下前缀
1 |
/*-moz- 火狐*/ |
