0基础前端学习---第四天

CSS3(下)

四、css3文本效果

css3文本模型阴影
text-shadow 属性
text-shadow 属性向文本添加一个或多个阴影属性
规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
语法
text-shadow: h-shadow v-shadow blur color;
css3自动换行
CSS3 word-wrap 属性
word-wrap:break-word;
允许对长单词进行拆分，并换行到下一行
css3渐变
--线性渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
从上到下：从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色 默认
background: linear-gradient(red, blue);
从左到右：从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色
background: linear-gradient(left, red , blue); /* 标准的语法 /从左上角到右下角background: linear-gradient(top left, red , blue); / 标准的语法 */
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（ bottom、 top、 right、 left、 bottom right，等等）。
语法
background: linear-gradient(angle, color-stop1, color-stop2);
使用角度
角度是指水平线和渐变线
之间的角度，逆时针方向
计算。
background: linear-gradient(180deg, red, blue); /* 标准的语法 */

带有多个颜色结点的从上到下的线性渐变
background: linear-gradient(red, green, blue); /* 标准的语法 */
--径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
可更改  circle
语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
径向渐变 - 颜色结点均匀分布（默认情况下）
background: radial-gradient(red, green, blue);
径向渐变 - 颜色结点不均匀分布
background: radial-gradient(red 5%, green 15%, blue 60%)
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */

五、2D/3D转换

css3 Transform
CSS3的变形（Transform）属性
元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法
transform ： none | <transform-function>
css3 2D转换
CSS3 rotate(XXdeg)  元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转  单位角度deg
CSS3 translate(x,y)  元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
CSS3 scale()  元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
CSS3 skew()   元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
旋转rotate
通过指定的角度参数对原元素指定一个2D rotation（2D 旋转）。
移动translate
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
三种情况:
translateX(x)仅水平方向移动（X轴移动）;
translateY(Y)仅垂直方向移动（Y轴移动）;
translate(x, y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。
translate(x, y)
通过矢量[x, y]指定一个2D translation, tx是第一个过渡值参数, ty是第二个过渡值参数选项。
缩放scale
scale()方法，指定对象的2D scale（2D缩放）。
三种情况:
scaleX(x)元素仅水平方向缩放（X轴缩放）;
scaleY(y)元素仅垂直方向缩放（Y轴缩放）;
scale(x, y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
scaleX(<number>)
使用 [sx, 1] 缩放矢量执行缩放操作，sx为所需参数。
scale([<number>, <number>])
提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。
扭曲skew()
skew()方法，指定对象skew transformation（斜切扭曲）。
三种情况:
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）;
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
skew(x, y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。
skew(<angle> [, <angle>])
X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。
css3 3D转换
CSS3 3d的 rotate()
旋转rotateX
rotateX方法指定对象在x轴上的旋转角度。
旋转rotate3d
rotate3d方法指定对象的3D旋转角度。
语法
transform: rotate3d(x, y, z, angle);
CSS3 3d的 translate()
移动translateZ
translateZ方法指定对象Z轴的平移。
移动translate3d
translate3d方法指定对象的3D位移。
语法
transform: translate3d(x, y, z);
CSS3 3d的 scale()
缩放scaleZ
scaleZ方法指定对象的z轴缩放。
缩放scale3d
scale3d方法指定对象的3D缩放。
语法
transform: scale3d(x, y, z);
CSS3 3d的 skew()

六、CSS3过渡

过渡（Transition）
1.transition-property属性
−检索或设置对象中的参与过渡的属性。width
2.语法
−transition-property: none | all | property;
3.参数说明
−none(没有属性改变)
−all(所有属性改变)，默认值
−property(元素属性名)
1、transition-duration属性
−检索或设置对象过渡的持续时间。
2、语法
−transition-duration: time;
1.transition-timing-function属性
−检索或设置对象中过渡的动画类型。
2.语法
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);
参数说明
1、−linear：线性过渡。以相同速度 等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
2、− ease：平滑过渡。慢速开始，然后变快，然后慢速结束 等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
3、−ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
4、−ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
5、−ease-in-out：由慢到快再到慢再快。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
transition-delay属性
−检索或设置对象延迟过渡的时间
2、语法
−transition-delay: time;
CSS3 transition属性
1、transition属性
−复合属性，检索或设置对象变换时的过渡。
2、语法
−transition: property duration timing-function delay;
transition: 属性名 属性过渡时间/s 过渡时间曲线  延时过渡何时开始/s;

七、CSS3动画（animation)

animation-name属性
检索或设置对象所应用的动画名称。
语法
animation-name: keyframename | none;
参数说明
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画（可用于覆盖从级联的动画）
animation-duration属性
检索或设置对象动画的持续时间
语法
animation-duration: time;
参数说明
time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果
animation-timing-function属性
检索或设置对象动画的过渡类型
语法
animation-timing-function:
ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>,
<number>, <number>);
animation-delay属性
检索或设置对象动画的延迟时间。
语法
animation-delay: time;
参数说明
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
animation-iteration-count属性
检索或设置对象动画的循环次数。
语法
animation-iteration-count: infinite | <number>;
参数说明
<number>为数字，其默认值为“1”；infinite为无限次数循环。
animation-direction属性
检索或设置对象动画在循环中是否反向运动。
语法
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
参数说明
normal：正常方向；
reverse：反方向运行；
alternate：动画先正常运行再反方向运行，并持续交替运行； alternate-reverse：动画先反运行再正方向运行，并持续交替运行。
animation-fill-mode属性
规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
语法
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
参数说明
none：默认值。不设置对象动画之外的状态；
forwards：设置对象状态为动画结束时的状态；
backwards：设置对象状态为动画开始时的状态；
both：设置对象状态为动画结束或开始的状态。
animation-play-state属性
指定动画是否正在运行或已暂停。
语法
animation-play-state: paused | running;
参数说明
paused：指定暂停动画；
running：默认值，指定正在运行的动画。

八、CSS3 @keyframes

关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
使用说明
使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。   在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。
语法
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
参数说明
animationname：必写项，定义animation的名称。
keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%) css-styles：必写项，一个或多个合法的CSS样式属性。