css3

1)动画

1.Animation

1>属性

animation-name:指定选用的动画的名字，即keyframes中的NAME。

animation-duration:动画效果持续的时间，秒。

animation-timing-function：过渡类型

 linear 匀速|ease 缓存|ease-in 加速|ease-out 减速| ease-in-out 先加速后减速

| cubic-bezier(number, number, number, number)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay动画延迟，秒

animation-iteration-count设定动画执行的次数，其值可以是数字也可以是infinite（循环执行）

animation-direction设定动画执行的方向

normal 正常| reverse反向 | alternate 持续交替| alternate-reverse正反向持续交替

复合属性animation :name duration timing-function delay interation-count direction

2>实例

css中的书写

div{
width:100px;
height:100px;
-webkit-animation-name:'dong';
-moz-animation-name:'dong';
-o-animation-name:'dong';
animation-name:'dong';
-webkit-animation-duration:4s;
-webkit-animation-time-function:linear/ease-in/ease-out/ease-in-out;
-webkit-animation-delay:4s;
-webkit-animation-iteration-count:4
	}
@-webkit-keyframes 'dong'{
  //也可以使用百分来展示动画的变化
from{background:red;}
	to{background:yellow;}
	}

2.transition

1>属性

transition-property 过渡属性 all|[attr]
transition-duration 过渡时间
transition-delay 延迟时间
transition-timing-function 运动类型

ease：（逐渐变慢）默认值

linear：（匀速）

ease-in：(加速)

ease-out：（减速）

ease-in-out：（先加速后减速）

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）贝塞尔曲线

2>

实例

css中的书写

​
.trans {
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}
<a href="/" class="trans">经过我~~</a>

​

3.transform2D/3D转换 
1>属性

语法：transform：none | <transform-function> 默认值是none
rotate()旋转 
transform：rotate(angle) 单位deg正数表示顺时针旋转，负数表示逆时针旋转
translate()平移:根据X轴和Y轴的位置给定参数，使当前元素位置移动
translateX() 仅水平方向移动
transform：translateX() 单位px
translateY() 仅垂直方向移动
transform：translateY() 单位px
translate(x,y) 水平方向和垂直方向同时移动
transform：translate( X, Y) 单位px
注意：如果只写一个参数，第二个默认是0，也就是只设置了水平方向上的位移
scale( )缩放 :设置元素的缩放程度
scaleX( ) 仅水平方向缩放 ->transform：scaleX() 没有单位
scaleY( ) 仅垂直方向缩放 ->transform：scaleY() 没有单位
scale(x,y) 使元素水平和垂直方向同时缩放 ->transform：scale(x,y) 没有单位
skew()扭曲/倾斜 
skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针
skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针
skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg

0deg与180deg 效果一样

3d变换 
开启3d空间transform-style: preserve-3d; 一般给父元素开启

2>实例

.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

2)选择器

1>属性选择器

1》element[attribute] 
为带有attribute属性的元素

a[href]{background:red;}
2》element[attribute='value'] 
为attribute='value'属性的元素

a[href="http://www.baidu.com"]{background:red;}

3》element[attribute~='value'] 
选择attribute属性值包含value 单词的元素

a[title~="se"]{background:red;}

4》element[attribute*='value']
选择attribute属性值包含value单词元素

a[title*="s"]{background:red;}
5》element[attribute$='value']
选择attribute属性值是以value结尾的元素

a[title$="sh"]{background:red;}

6》element[attribute^='value']
选择attribute属性值是以value开头的元素

2>伪类选择器

:link  未被访问过的a标签样式 

:visited已经被访问过的a标签样式。

:hover链接被长按时的样式。

:active鼠标悬停在a标签上的样式

:focus

:target当我们点击锚点链接时，对应id的元素会显示在视口

<p><a href="#new1">跳转至内容1</a></p>

 <p id="new1"><b>内容1....</b></p>

1. 伪元素

1》element::first-line ：对元素的第一行文本进行设置，只能用于块级元素
2》ement::first-letter ：用于向文本的首字母设置特殊样式，只能用于块级元素
3》element::before ：在元素的内容前面插入新内容，常与content配合使用
4》element::after ：在元素的内容后面插入新内容，常与content配合使用
5》element::selection ：用于设置浏览器中选中文本后的背景色与前景色

3>nth选择器

first-child：选择属于父元素的第一元素

last-child：选择属于父元素的最后一个子元素
nth-child(n) ：选择某元素下的第n个元素，括号里还可以传odd和even两个关键字 ,odd是奇数（从1开始），even是偶数
nth-last-child(n) ：匹配属于某元素下的第n个element子元素，从最后一个子元素开始计数
nth-of-type(n) ：匹配属于父元素的特定类型的第n个子元素,element为指定类型的子元素
nth-last-of-type ：匹配属于父元素的特定类型的第n个子元素，从最后一个计数
first-of-type：匹配属于其父元素的特定类型的首个

last-of-type ：最后一个子元素的每个元素
only-child ：匹配属于父元素的唯一子元素的每个元素
empty :匹配没有子元素（包括文本节点）的每个元素

4>nth-of-type | nth-child?

<ul> 
<p>111</p>
 <span>222</span>
 <li>1</li> 
<li>2</li>
<li>3</li> 
</ul> 

Nth-child不过滤标签

Nth-of-type过滤标签

建议一般使用nth-of-type，不容易出问题。
li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。

3)背景边框

1>边框

1》border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
复合属性：border-radius：
属性值
四个值：左上角 右上角 右下角 左下角
三个值：左上角 右上角和左下角 右下角
两个值：左上角和右下角 右上角和左下角
一个值：4个角都生效
border-radius中的属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径。

2>box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

3>background

1》background:color position/size repeat origin clip attachment image

注意：如果同时设置”position”和”size”两个属性，应该用左斜杠”/”，而不是用空格把两个参数隔开

2》color:背景颜色值；可以使用#，英语，rgba来设置颜色

      background-color:#ccc;

  background-color:red;

  background-color:rgba(255,255,0,0.8);

3》position：背景图片的定位（如果没有图片属性不起作用）

可选值：两个参数，水平位置和垂直位置，如果只有一个值，第二个值默认为”center”；

可以使用位置关键字，百分比（以元素大小为基值），像素值

百分比计算：

x：（容器的宽度-背景图片的宽度）*x百分比，超出部分隐藏

y：（容器的高度-背景图片的高度）*y百分比，超出部分隐藏

     background-position:left;

 background-position:10%;

 background-position:100px;

4》size：图片尺寸。应用于图片（IE9+）

可选值：两个数值，如果只有一个值，第二个值为auto

默认是图片自身大小

可以使用像素，百分比（以元素大小为基础）

百分比：是根据相对的背景区域来做调整的

cover:等比例缩放图片，覆盖这个元素”，铺满整个显示区域，如果显示比例和显示区域的比例相差很大某些部分不会显示，如果图片很小会放大到没有空白，其中一边就不会显示，类似于windows中桌面背景”填充

contain:等比例缩放图片，适应元素的宽或者高，他是按照某一边来覆盖显示区域的，会有白位，类似于windows中桌面背景”适应”1

5》repeat：平铺方式

repeat:完全平铺（默认）

repeat-x:水平平铺

repeat-y:垂直平铺

no-repeat:不平铺

inherit：属性的设置从父元素继承

6》origin：背景的参考区域（IE7默认是从border开始显示背景），只能控制背景图片

可选值：

border-box：决定background-position起始位置从border的外边缘开始显示背景图片

padding-box：决定background-position起始位置从padding的外边缘开始显示背景图片，默认值

content-box：决定background-position起始位置从contain的外边缘开始显示背景图片

7》clip：背景的可视区域（可以让背景图片和背景颜色统一在相同位置上，谷歌：可以设置padding-box，content-box，火狐比较复杂)

可选值：

border-box：背景从border区域向外裁剪，也就是将超出部分裁剪，默认值

padding-box：背景从padding区域向外裁剪，也就是将超出padding区域的背景裁剪

content-box：背景从content区域向外裁剪，也就是将超出content区域的背景裁剪

background-color位置是从border左上角到右下角，background-image位置是从padding左上到border右下角

8》attachment：设置背景图片是否固定或随着页面的其余部分滚动

默认值是：scroll

fixed背景图片是固定的

9》多背景的设置

使用“，”隔开，继续写背景属性

4)分栏布局

属性	描述
column-count	规定元素应该被分割的列数
column-fill	规定如何填充列
column-gap	规定列之间的间隔
column-rule	复合属性
column-rule-color	规定列之间规则的颜色
column-rule-style	规定列之间规则的样式
column-rule-width	规定列之间规则的宽度
column-span	规定原色应该横跨的列数
column-width	规定列的宽度
columns	规定设置column-width和column-count的简写属性。

文字特效

text-shadow:添加文字阴影

1》文本溢出处理：

white-space:

nowrap;//强制不换行
text-overflow:（需要和overflow:hidden配合使用）

ellipsis超出部分用…显示

clip超出剪切掉

word-wrap:

break-word;//允许长文本换行
word-break:

break-all;//允许拆分换行  

keep-all;//不允许拆分换行

1.1>word-break:break-all和Word-wrap:break-word区别：

在浏览器中连续的英文或者数字是按单词进行解析的，也就是说每个单词是一个整体，在串字符串中，如果有一个单词超出设置的宽度，他会尝试挪到下一行

word-wrap：break-word是对长单词允许断句，但是任然会挪到下一行，如果剩下的空间不足单词放下

word-break：break-all对长字符串允许断句，而且不会挪到以下行，更省空间。