CSS3初学篇章_5(背景样式/列表样式/过渡动画)
背景样式
1.背景颜色
语法:background-color : transparent | color
body { background-color:#CCCCCC;}
2.渐变色彩
语法:background: linear-gradient(方向,color,color,……) 设置渐变,默认为均匀分布
,可在color 后设置百分比
方向:to buttom(默认)、to top、to right、to left、to bottom right,to top right
background-image:linear-gradient(to left, red 30%,blue);
3.背景图片
语法:background-image : none | url ( url )
body { background-image:url(images/bg.gif);}
4.背景平铺方式
语法:background-repeat : repeat | no-repeat | repeat-x | repeat-y
body { background-repeat:repeat-x;}
5.背景定位
语法:background-position : 左对齐方式 上对齐方式
body { background-position:left bottom;} body { background-position:30% 20px;}
6.背景原点
语法:background-origin : border-box | padding-box | content-box;
说明:设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat
此属性才会生效。
padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。
7.背景的显示区域
语法:background-clip : border-box | padding-box | content-box | text
说明:设定背景图像向外裁剪的区域。
text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为
填充色之类的遮罩效果。
8.背景尺寸
语法:background-size:<length> | <percentage> | auto | cover | contain
说明:设置背景图片的大小
auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包
含在容器内。
9.背景样式缩写
语法:background: 背景色 背景图片 背景平铺方式 背景定位
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px; }
10.多重背景
语法: background : [background-color] | [background-image] | [background-
position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
注意:
用逗号隔开每组 background 的缩写值;
如果有 size 值,需要紧跟 position 并且
用 "/" 隔开;
如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明
所有背景图片应用该属性值。
background-color 只能设置一个。
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;列表样式
列表样式
1.项目符号
语法:list-style-type : disc | circle | square | decimal | lower-roman | upper-
roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
说明:控制列表每一项头部图标
disc: 实心圆(CSS1)
circle: 空心圆(CSS1)
square: 实心方块(CSS1)
decimal: 阿拉伯数字(CSS1)
lower-roman: 小写罗马数字(CSS1)
upper-roman: 大写罗马数字(CSS1)
lower-alpha: 小写英文字母(CSS1)
upper-alpha: 大写英文字母(CSS1)
none: 不使用项目符号(CSS1)
armenian: 传统的亚美尼亚数字(CSS2)
cjk-ideographic: 浅白的表意数字(CSS2)
georgian: 传统的乔治数字(CSS2)
lower-greek: 基本的希腊小写字母(CSS2)
hebrew: 传统的希伯莱数字(CSS2)
hiragana: 日文平假名字符(CSS2)
hiragana-iroha: 日文平假名序号(CSS2)
katakana: 日文片假名字符(CSS2)
katakana-iroha: 日文片假名序号(CSS2)
lower-latin: 小写拉丁字母(CSS2)
upper-latin: 大写拉丁字母(CSS2)
ul { list-style-type:disc;}/*默认*/
2.自定义项目符号
语法:
list-style-image : none | url ( url )
说明:用图片来定义列表的每一项的头部图标
ul {list-style-image:url(images/arrow.gif)}
变形样式
语法:transform:各类函数
说明:改变元素的大小,透明,旋转角度,扭曲度等。
各类函数:
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对
应Y轴。如果第二个参数未提供,则默认值为0
transform-origin:任何一个元素都有一个中心点,默认情况之下,其中心点是居于元素X轴
和Y轴的50%处。
translateX(): 指定对象X轴(水平方向)的平移
translateY(): 指定对象Y轴(垂直方向)的平移
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的
定义
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如
果第二个参数未提供,则默认取第一个参数的值 skew(): 指定对象skew transformation(
斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值
为0
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对
应Z轴,参数不允许省略
过渡动画
1.transition-property(过渡属性):
说明:设置对象中的参与过渡的属性。
div{ transition-property:width,height,color; }
2. transition-duration(过渡所需时间):
说明:主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间。
div{ transition-duration: .5s; }
3. transition-timing-function(动画--过渡函数) :
说明:指过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况。
取值:
ease:默认值,逐渐变慢(cubic-bezier(0.25,0.1,0.25,1))
linear:匀速过渡效果(等于 cubic-bezier(0,0,1,1))
ease-in:加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1.0))
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。(动画速度自定义)
div{ transition-timing-function:ease-in; }
4. transition-delay(动画--过渡延迟时间):
说明:transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。
div { transition-delay:.1s; }
5. transition(过渡):
语法:
transition:[ none | <transition-property> ] || < transition-duration > || <transition-timing-function> || < transition-delay> [,*]
说明:通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值。
/*all代表所有属性*/ div{ transition: all .5s ease-in .1s; }