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;
}