1.渐变
CSS3 定义了两种类型的渐变(gradients):
- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
- 径向渐变(Radial Gradients)- 由它们的中心定义
1.1线性渐变
1.1.1基础线性渐变
- 需设置两个及两个以上的颜色
- 颜色之间用
,
间隔
- 颜色会平均分配
- 根据设置颜色的顺序,进行渐变
div{
background: linear-gradient(red,black);
}
1.1.2进阶线性渐变(可控制每个颜色的渐变区域)
- 距离跟随在颜色后面,可以是
px
或%
- 如:第一个距离 和 第二个距离是重叠区域,将没有过渡效果
- 最后一个颜色值,会填满后续所有距离
- 如果第一个数值不是从
0px
开始,则从你设置的位置才开始进行颜色过渡
background: linear-gradient(red 20%,black 30%);
1.1.3高级线性渐变(可设置渐变方向) - 默认:从上至下
- 关键词
- 写在颜色前面
,
间隔
to
指向,后面跟上指定方向
left
、right
、top
、bottom
随机组合
to left
从 右 至 左
to right
从 左 至 右
to top
从 下 至 上
to bottom
从 上 至 下 - 默认
to left top
从 右下 至 左上
to left bottom
从 右上 至 左下
to right top
从 左下 至 右上
to right bottom
从 左上 至 右下
background: linear-gradient(to left top,red 150px,black 300px);
- 指定角度(单位:deg)
0deg
对应的是 to top
从 下 至 上,也就是180deg
- 角度正负
background: linear-gradient(90deg,red 150px,black 300px);
1.1.4终极线性渐变(重复线性渐变)
用来写方虚线,真是极好的
- repeating-linear-gradient() - 重复线性渐变
div{
width: 720px;
height: 300px;
background: repeating-linear-gradient(0deg,red 0px,red 50px,black 50px ,black 100px);
}
1.2径向渐变
1.2.1基础径向渐变
- 需设置两个及两个以上的颜色
- 颜色之间用
,
间隔
- 颜色会平均分配
- 根据设置颜色的顺序,进行渐变
background: radial-gradient(red,black);
1.2.2进阶径向渐变
- 距离跟随在颜色后面,可以是
px
或%
- 如:第一个距离 和 第二个距离是重叠区域,将没有过渡效果
- 最后一个颜色值,会填满后续所有距离
- 如果第一个数值不是从
0px
开始,则从你设置的位置才开始进行颜色过渡
- 数值是圆的水平半径,垂直半径跟随水平自动计算
background: linear-gradient(red 20%,black 30%);
- 可以指定形状 - 不同的形状,垂直半径的计算方式不一样
- 添加在颜色前
- 以
,
进行间隔
- ellipse 椭圆形 ,circle 圆形
background: radial-gradient(circle,red 250px,black 20px);
- 还可以直接输入垂直、水平的半径,更好的控制圆的形状
- 具体数值
如果设置的值,小于颜色后面的半径值,则参考颜色后半径
background: radial-gradient(100px 100px,red 50px,black 100px,green);
- 关键词(没啥用)
farthest-corner
半径是圆心到最远角
farthest-side
半径是圆心到最远边
closest-corner
半径是圆心到最近角
closest-side
半径是圆心到最近边
background: radial-gradient( farthest-side at left top ,red 50px,black 50px);
2.动画
2.1CSS3 transition 过渡
控制一段时间内属性的值如何变为另一个值,使属性的值逐渐变化,不会太突兀
transition-duration
过渡持续时间 (单位:s 秒 / ms 毫秒)
transition-property
想要执行过渡的样式
- 默认 all
- 只支持数值类型的值,而且,必须是同一个样式,从一个数值,过渡到另一个样式
transition-delay
过渡延迟时间(单位:s 秒 / ms 毫秒)
transition-timing-function
过渡执行动画
linear
整个过程保持相同的速度
ease
慢速开始,然后加速,在慢下来,结束时特别慢(默认值)
ease-in
慢速开始,然后加速
ease-out
快速开始,然后减速
ease-in-out
与ease类似,中间较快,两端很慢但不同速
cubic-bezier
三次方贝塞尔曲线cubic-bezier(x1,y1,x2,y2)
https://cubic-bezier.com/#.17,.67,.83,.67
复合写法:
transition:property duration timing-function delay;
transition: property duration timing-function , property duration timing-function;
在过渡中,持续时间和延迟值的顺序很重要,解析为时间的第一值设定的是持续时间(执行时间在前,延迟时间一定在后)
2.2 CSS3 transform 变换
2.3 CSS3 animation 动画
- animation-name 绑定到选择器的 keyframe 名称
- keyframes 规定动画
@keyframes name {selector {//css样式;}}
- name 必须,定义动画名称
- selector 必须,动画时长百分比
- 0-100%
- from(与 0% 相同) to(与 100% 相同)
@keyframes mymove{
0% {top:0px; background:red;}
100% {top:200px; background:yellow;}
}
animation-duration 完成动画所花费的时间,以秒或毫秒计
animation-timing-function 规定动画的速度曲线
- linear 动画从头到尾的速度是相同的。
- ease 默认。动画以低速开始,然后加快,在结束前变慢。
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 动画开始之前的延迟时间,默认值是0
animation-iteration-count 动画播放的次数
- n 定义动画播放次数的数值。
- infinite 规定动画应该无限次播放。
animation-direction 是否应该轮流反向播放动画
- normal 默认值。动画应该正常播放。
- alternate 动画应该轮流反向播放。
animation-play-state 规定动画是否正在运行或暂停。默认是"running"。
animation-fill-mode 规定对象动画时间之外的状态
- Forwards 规定动画运动完成之后,停留在最后一帧的状态
- backwards 在动画播放之前,动画延时的这段时间里直接使用关键帧里面的第一帧样式