学习总结第八周（2D3D动画弹性盒子媒体查询等）

CSS3

1.边框

1）border-image

语法：border-image: source slice width outset repeat/initial/inherit;
允许图片作为边框，用于创建上文边框的原始图像
可选值：
round：图像平铺（重复）来填充该区域
stretch：图像被拉伸来填充该区域

2）box-shadow

3）border-radius

border-radius:15px 50px 30px 5px：
第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角
border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角（即对角），第三个值适用于右下角
border-radius: 15px 50px：第一个值适用于左上角和右下角（对角），第二个值适用于右上角和左下角（对角）
border-radius: 15px：该值适用于所有四个角，均等圆角

2.圆角

border-radius

3.背景

1）background-image

不同的背景图片添加时用逗号隔开，第一个添加的在最顶层，可以给图片设置多个属性

#example1 { 
  background-image: url(img_flwr.gif), url(paper.gif); 
  background-position: right bottom, left top; 
  background-repeat: no-repeat, repeat; 
}

#example2 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

2）background-size（背景大小）

background-size指定背景图像的大小

（1）length

设置宽和高，第一个为宽，第二个为高，如果只设置一个值，那么第二个值为自动转换为auto

（2）percentage

该属性以父元素的百分比来设置图片的宽度和高度，0~100%之间的值，第一个为宽度，第二个为高度
如果只设置一个值，那么第二个值为自动转换为auto

div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

（3）cover

把背景图片扩展足够大，以使背景图片完全覆盖 背景区域

（4）contain

把背景图片扩展至最大尺寸，以便宽和高完全适应内容区域

注意：background-size：cover 图片保持比例放大或缩小使x轴与y轴都铺满整个容器，但超出部分会被裁剪，图片不变形
background-size：contain 图片保持比例放大或缩小填充容器，若不能完整填充，x轴和y轴都有可能出现白边，图片不变形

3）background-origin(背景区域）

background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。

4）background-clip

background-clip背景剪裁属性 从指定位置开始绘制
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）

4.渐变

● 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
● 径向渐变（Radial Gradients）- 由它们的中心定义

1)线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, …);

从上到下线性渐变
#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

从左到右线性渐变
#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

从左上到右下
#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

角度解析

带有角度的线性渐变
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

使用透明度
为了添加透明度，我们使用 rgba() 函数来定义颜色节点
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

从左到右的线性渐变 带有透明度
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

一个重复的线性渐变
#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

2）径向渐变

语法：background-image: radial-gradient(shape size at position, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

颜色不均匀的渐变
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

5.文本效果

1)text-shadow

文本阴影
设置顺序: 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

2)box-shadow

盒子阴影
设置顺序: 水平阴影，垂直阴影，模糊的距离，以及阴影的颜色 内外阴影（默认为外阴影）

3)text-overflow

步骤：先将文本的默认换行取消，然后进行溢出内容的隐藏，再设置隐藏样式.

white-space:nowrap; 表示文本不换行
overflow：hidden 表示隐藏溢出内容
text-overflow： ；
clip 剪切文本。
ellipsis 显示省略符号 … 来代表被修剪的文本。

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

4)word-wrap

允许对长的不可分割的单词进行分割并换行到下一行

normal 只在允许的断字点（即一个完整单词结束）换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。（将一个单词拆分）

5)word-break

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

6.2D 3D转换（transform：）

1）2D转换

注意：多重转换，把旋转放在最后，因为旋转容易破坏坐标系

（1）translate(X，Y)平移

以原来位置为起点 X为正，则水平向右，Y为正，竖直向下

（2）rotate(…deg)旋转

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

（3）scale()增缩

scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
若写一个值，则表示宽度和高度增加相同的倍数

（4）skew()倾斜

● skewX();表示只在X轴(水平方向)倾斜。
● skewY();表示只在Y轴(垂直方向)倾斜。

（5）matrix()合并属性

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

（6)transform-origin

默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。
没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心(变形原点)位置进行变形的
但很多时候需要在不同的位置对元素进行变形操作，使用transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、 bottom、left和center这样的关键词。
2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Y轴的位置。
例如: 把转换中心改为由左上角。然后选择90度

2）3D转换

matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

1）translate

如果我们给z轴一个移动距离，可以发现根本没有任何效果，
这是因为想要在网页上产生3D效果需要透视（perspective）。所谓透视，也可以称为视距: 视距就是人的眼睛到屏幕的距离。我们都知道眼睛距离物体越近，物体越大，反之离得越远，物体越小，这就是常说的近大远小视觉立体。
perspective的值越大，效果越明显（因为眼睛离屏幕越近）
有了透视，就能看到 translateZ引起的变化了。透视要写在被观察元素的父盒子上面(可以是祖先元素)

变化规则(由内向外):
translatez: 往外是正值，并且值越大，物体越大
translatez: 往里是负值，并且值越小，物体越小
综上，z轴位移，数值越大，物体越大;反之，数值越小，物体越小。

2）rotate

3D旋转指可以让元素在三维平面内沿着中间位置的x，y，z三轴或者自定义轴旋转（transform-origin）

角度为正，则顺时针

7.过渡（transition）

CSS3的过渡就是平滑地改变元素的css值，使元素从一个样式样式逐渐过渡到另一个样式
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

语法:
transition:[ ll ]
transition-property: 指定过渡的CSS属性
transition-duration: 指定完成过渡所需的时间, 默认是 0。
transition-timing-function: 指定过渡调速函数,默认是"ease"。
ease: 由快到慢，逐渐变慢 (默认值)
linear: 恒速。 ( 匀速 )
ease-in: 速度越来越快，呈一种加速状态。这种效果称为渐显效果。(加速 )
ease-out: 速度越来越慢，呈一种减速状态。这种效果称为渐隐效果.( 减速 )
ease-in-out: 加速再减速。这种效果称为渐显渐隐效果。
transition -delay: 指定过渡开始出现的延迟时间,默认是 0。

8.动画（animation）

1）transition的局限性

transition的优点在于简单易用，但是它有几个很大的局限
(1) transition需要事件触发，所以没法在网页加载时自动发生
(2) transition是一次性的，不能重复发生，除非一再触发
(3)transition只能定义开始状态和结束状态，不能定义中旬状态，也就是说只有两个状态
(4) 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

2)@keyframes

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
● 规定动画的名称
● 规定动画的时长

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

3)animation属性

语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。

（1）animation-iteration-count

n 一个数字，定义应该播放多少次动画
infinite 指定动画应该播放无限次（永远

（2）animation-direction

normal 默认值。动画按正常播放。
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse 动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。
4）transition和animation的区别
transition需要事件进行触发，而animation不需要事件进行触发，调用关键帧即可

步骤：1.制作关键帧
@keyframes 关键帧的名称 {0%{} 20%{} 30%{} …}
2.调用关键帧
animation：关键帧的名称

9.弹性盒子

属性描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

1）flex-direction

● row：横向从左到右排列（左对齐），默认的排列方式。
● row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
● column：纵向排列。
● column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

2）flex（复合属性）

可同时设置flex-grow，flex-shrink,flax-basis
语法：flex：grow shrink basis

3）flex-wrap(多行显示)

● nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
● wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
● wrap-reverse -反转 wrap 排列

4）flex-flow（direction和wrap的复合）

语法：flex-flow：direction wrap；

5）order

定义弹性盒子内部“子元素”的排列顺序
语法： order：整数
order属性的取值是一个正整数

6）justify-content（水平对齐）

● flex-start：
弹性项目向行头紧挨着填充。这个是默认值。
● flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
● center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
● space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
● space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。
如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间 隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

7)align-items(垂直对齐)

语法：align-items: flex-start | flex-end | center | baseline | stretch

● flex-start：所有元素在上边 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
● flex-end：所有元素在下边 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
● center：所有元素在中部 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
● baseline： 所有元素在父元素的基线上 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
● stretch： 拉伸子元素以适应父元素高度 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

10.媒体查询

媒体查询可以检测的内容：viewport宽度和高度，设备的宽度和高度，设备的朝向和分辨率

1）.引入方式

（1）在样式表中引入

● 在style标签中引入
● 使用link标签引入外部CSS文件 媒体查询写在CSS文件中

语法
@media mediatype and (媒体特性)
{
选择器{属性：属性值}
}
（1）mediatype：
all：所有媒体设备
print：打印机或打印预览
screen：电脑屏幕、平板电脑、智能手机等
speech： 屏幕阅读器等发声设备
（2）媒体特性
max-width 最大宽度 min-width 最小宽度
device-width 设备宽 device-height 设备高
max-device-width 最大设备宽 min-device-width 最小设备宽
orientation ：浏览器朝向
landscape 横屏
portrait 竖屏
aspect-radio:1/2 可视区宽度和高度的比率 （max min）
device-aspect-radio：1/1 输出设备的屏幕可视区宽度和高度的比率

(2)通过link标签中的media属性实现

本周总结

这周又进一步学习了CSS的一些内容，并进行了考核，通过考核让我明白了自己的不足，对图形的观察能力不够，无法正确看出动画的组成部分，希望下周的学习可以理解的更透彻，学习计划完成的更好