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样式属性。