day16知识点
很多css3属性 最初的预览版没有形成最终的正式版,但是浏览器为了对这些新属性形成支持,主流浏览器提供属于自己的语法规则 “浏览器前缀”
-webkit- 谷歌、苹果 浏览器前缀
-moz- 火狐浏览器前缀
-ms- IE浏览器前缀
-o- 欧鹏浏览器
注:
添加浏览器前缀 -> 兼容模式
不添加浏览器前缀 -> 标准模式
一、渐变 渐变?:背景在多个颜色之间平稳的过度
线性渐变: 从一个方向到另一个方向的颜色的变化
标准模式的语法(不添加浏览器前缀):
background:linear-gradient(direction,color-stop1,color-stop2,…等等 )
说明: direction:默认为to bottom, 即从上向下的渐变
stop:颜色的分布位置,默认均分分布列如有三个颜色,各个颜色的stop均为33.33%
兼容模式语法(添加浏览器后缀)
background:-webkit- linear-gradient(direction,color-stop1,color-stop2,等等)
说明:direction:不能添加to 默认指的哪 从那个方向开始
渐变方向 to left\right\top\
对着角渐变 : to left top \ to right bottom
渐变角度的变化 列如:标准模式: 40deg(40度) 兼容模式 : (90-40=50度) 等于标准模式的40度
线性渐变:颜色的分布:
linear-gradient(方向,颜色1(20%)颜色2(30%)颜色3) 到20%这个位置仍然是颜色1 出了20% 开始向颜色2渐变
径向渐变:从一个点到四周的过度渐变
语法:(必须添加浏览器前缀)
background:—wedkit—linear-gradient(center,shape,size,…,last-color)
说明:center:渐变起点的位置,可以为百分比,默认是图形的正中心
shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为cellpse,如果元素形状为正方形的元素,则ellispe和circle显示一样
size:渐变的大小,即渐变到哪里停止,他有四个值。closest-side(最近边)farthest-side:(最远变)closest-side(最近角) farthes-corner:(最远角)
关于径向渐变的大小:
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角
重复性渐变:
重复性线性渐变:background:repeating-linear-gradient();
重复性径向渐变:background:repeating-radial-gradient();
二、过度
语法 transition-property:检索或设置对象中的参与过渡的属性
transition-duration:检索或设置对象过渡的持续时间
transition-delay:检索或设置对象延迟过渡的时间
transition-timing-function:检索或设置对象中过渡的动画类型
动画的运动类型: 默认的不是匀速 ,默认的是ease
简写属性:transition:过度的属性(all) 过度的时间 延迟时间 动画的类型(linear 均速)
注:transition 必须通过事件触发(鼠标滑过:hover) 改变css属性