css3理解整理

最近重新整理了一下css3的笔记将她放到掘金上方便大家方便自己查找

css3设计理念

设计理念: 我们采用两种设计理念来规划我们的网站

渐进增强 (progressive enhancement) :

一开始只构建站点的最少特性,然后不断的针对浏览器追加功能
复制代码

优雅降级 (graceful degradation) :

一开始就构建站点的完整功能,然后针对浏览器测试和修复
复制代码

css3选择器

结构选择器

:nth-child(n) 
:nth-child(2n) 偶数元素
:nth-child(2n+1) 奇数元素
:nth-of-type(n)  
:first-child
:last-child
:only-child
:only-of-type
:empty
复制代码

否定选择器

:not()
复制代码

属性选择器

E[attr=val]
E[attr|=val]  只能等于val  或只能以val-开头
E[attr*=val]  包含val字符串
E[attr~=val]   属性值有多个,其中有一个是val
E[attr^=val]   以val开头,不管后面是什么
E[attr$=val]   以val结尾,不管前面是什么
复制代码

目标伪类选择器

:target 用来匹配url指向的目标元素
存在url指向该匹配元素时,样式效果才会生效
复制代码

伪元素

: first-line  匹配第一行文本
: first-letter 匹配第一个首字符
: before 和 : after  DOM元素前后插入额外的内容
复制代码

css样式

圆角border-radius

border-radius: 1-4个数字 / 1-4个数字
前面是水平半径，后面是垂直半径
四个数字方向分别是左上  右上  右下  左下
不给“/”则水平半径和垂直半径一样
border-radius: 10px/5px;
border-radius:60px 40px 30px 20px /30px 20px 10px 5
例子 : 圆  椭圆  半圆  扇形 
复制代码

线性渐变linear-gradient

linear-gradient
linear-gradient([<起点> || <角度>,]? <点>, <点>…)
只能用在背景上
颜色是沿着一条直线轴变化
参数
起点：从什么方向开始渐变
left、top、left top
角度：从什么角度开始渐变
xxx deg的形式
点：渐变点的颜色和位置
red 50%，位置可选
重复线性渐变
复制代码

径向渐变radial-gradient

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
从“一个点”向多方向颜色渐变
shape形状 ： ellipse、circle  或设置水平半径,垂直半径
size:渐变的大小，即渐变到哪里停止，有如下关键词:
     closest-side：最近边； farthest-side：最远边；
	 closest-corner：最近角； farthest-corner：最远角 (默认值)
position ：关键词|数值|百分比
重复的径向渐变
复制代码

背景background

background-origin
padding-box 从padding区域显示（默认）
border-box 从box 从content区border区域显示
content-域显示
background-clip
padding-box  从padding区域向外裁剪
border-box  从border区域往外裁剪
content-box  从content区域往外裁剪
background-size
100% 100%  百分比
10px 10px 数值
contain   按原始比例收缩,背景图显示完整,但不一定铺满整个容器
cover   按原始比例收缩,背景图可能显示不完整,但铺满整个容器
background-attachment 
背景图片是滚动的还是固定的 fixed(固定的) 默认是滚动的
复制代码

盒子阴影

box-shadow: h v blur spread color inset;

	h :水平方向偏移
	v : 垂直方向偏移
	blur : 模糊半径
	spread : 扩展半径
	color : 颜色
	inset :加上这个表示内阴影 默认是外阴影
复制代码

文本阴影text

text-shadow : x y blur color

x轴偏移  y轴偏移  模糊度  颜色
多层阴影制作文字立体效果 ,设置多种颜色,中间以逗号隔开
复制代码

文字添加边框

text-stroke: 2px blue

	通过设定1px的透明边框，可以让文字变得平滑
	颜色设成透明能创建镂空字体
复制代码

css动画

transition  过渡动画
transform  变型属性
animation  帧动画
复制代码

Transition过渡

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 ）
 http://cubic-bezier.com/
复制代码

webkit内核下:

ele.addEventListener('webkitTransitionEnd',function(){},false);
复制代码

标准浏览器下:

	ele.addEventListener(‘transitionend',function(){},false)
transition 执行次数问题
实例演示
复制代码

2D变换

rotate()  旋转函数
	-deg  度数
	-Transform-origin 旋转的基点
skew() 倾斜函数
	-skewX()
	-skewY()
scale() 缩放函数 默认值是1 
	-scaleX()
	-scaleY()
translate() 位移函数
	-translateX()
	-translateY()

复制代码

            // transform-origin: 0% 0%;
            //运动平滑
            // transition:all 1s;

            // 拉伸
            // transform: skew(30deg);//只写一个值等同于skewX
            // transform: skew(30deg,30deg);//等同于skewX skewY
            // transform: skewY(30deg);
            transform: scale(2) rotate(720deg);//方法两倍 多个变化之间以空格隔开

            transform:translate(30px);//一个值时以X轴动
            transform:translate(30px,60px);//一个值时以X轴动同样有X和Y
复制代码

animation-声明关键帧

关键帧——@keyframes
类似于flash
定义动画在每个阶段的样式，即帧动画
关键帧的时间单位
数字：0%、25%、100%等(设置某个时间段内的任意时间点的样式)
字符：from(0%)、to(100%)
格式
keyframes 动画名称
{
	动画状态
}
复制代码

animation-调用动画

必要属性

//可以综合写

animation-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		重复次数
animation-direction		动画运行的方向
normal | reverse | alternate | alternate-reverse
animation-play-state   动画状态
running | paused
animation-fill-mode   动画结束后的状态
			none | forwards| backwards | both 		
复制代码

3D变换

    perspective: 800px;
    // 景深越大  变化越不明显
 // 坐标箭头 冲着右手心  顺时针就是正数

transform-style : flat | preserve-3d (3D空间展示)   
perspective 透视效果 
transform:perspective(800px)  直接作用在子元素上
perspective-origin 透视点位置
transform 新增函数
translate3d( tx , ty, tz )
translateX()    translateY()   translateZ()
rotate3d( rx , ry , rz，a)
rotateX()   rotateY()   rotateZ()
scale3d( sx , sy , sz)
scaleX()     scaleY()     scaleZ()
复制代码

H5

h5页面链接 enter link description here

复制代码