整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天我们学习的内容有：过渡，动画，转换，伸缩盒子。
可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~
1.过渡
在css3中，有一个属性可以设置过渡效果。
它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。
A.案例：通过transition设置焦点过渡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>
注意页面中的代码：
第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。
第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;
这四个数据分别对应
transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。
transition-duration(过渡的时间):以秒作为单位，设置过渡的时间
transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。
所以，我们通过transition这个复合属性设置的过渡效果为：
all:需要过渡所有的属性
1s:过渡的时间为1秒
linear:匀速过渡
0.3s:在延迟0.3秒之后开始过渡动画。
如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。
2.动画：
在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。
但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。
那么，动画animation就可以满足我们的需要。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>
代码效果如下：
同样，让我们来关注编写的代码：
1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：
/*动画的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*动画最初的时候，将left设置为0px，top设置为0px*/
0%{
left:0px;
top:0px;
}
/*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px，
背景颜色过渡为绿色，圆角过渡为0(无圆角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px，
背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0，
背景颜色过渡为灰色，圆角过渡为0(无圆角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px，
背景颜色过渡为红色，圆角过渡为50%(正圆)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。
2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。
就是下面这句代码了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一个复合属性，设置了6个值，分别对应：
animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。
animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒
animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。
animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。
animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。
animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是
alternate则表示要反向播放动画，大家也可以自己试一试这个效果。
最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。
3.转换
在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：
A.平移
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>
代码效果如下：
如上图所示，本来div盒子的位置是left:0,top:0;
但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。
B.旋转
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>
代码效果如下：
如上图所示，本来div盒子应该是四四方方的。
但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。
进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。
C.缩放
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>
代码效果如下：
如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放
scale的第一个参数为0.5,表示横向缩小为0.5倍
scale的第二个参数为0.25，表示纵向缩小为0.25倍。
scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。
小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。
4.flex布局
Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
代码效果如下：
如图所示，咱们通过display:flex将.parent元素设置为了flex盒子，那么子元素将会按照justify-content设置的方式进行元素的排列，目前看来，和我们没有设置flex盒子的效果是一致的。
接下来我们更改一下，将justify-content设置为flex-end，效果如下图所示：
所以我们就应该发现，flex-start是让所有的子元素从父元素的左侧开始排列
而flex-end是让所有的子元素从元素的右侧开始排列。
我们再来更改一下，将justify-content设置为center，效果如下图所示：
更厉害了，子元素在父盒子的中央位置排列显示了。
然后，我们再将justify-content设置为space-around，效果如下图所示：
它是平均分配的形式为每一个子元素设置了间距，但是看起来有点变扭。
所以我们推荐将justify-content设置为space-between，效果如下图：
我们还可以通过flex-wrap来设置子元素是否换行显示，以及flex-direction设置子元素排列的顺序。
这两个属性可以设置的值如下：
flex-wrap: nowrap;//不换行，会自动收缩
flex-wrap: warp;//换行，会自动收缩
flex-wrap: warp-reverse;//反转，从默认的从上到下排列反转为从下到上。
flex-direction:row; //从左至右一行一行进行子元素的排列
flex-direction:column; //从上到下一列一列进行子元素的排列
flex-direction:row-reverse; //从右至左一行一行进行子元素的排列
flex-direction:column-reverse; //从下到上一列一列进行子元素的排列
案例代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
我们设置了flex-wrap: nowrap;（不换行，压缩所有的子元素在一行中显示），以及flex-direction: row-reverse;（反向排列）
代码效果如下：
如果设置为flex-wrap: warp（换行显示无法在一行显示的子元素），则效果如下：
如果将flex-direction: column;,则会纵向排列元素，效果如下图：
除了上面的这些给伸缩盒子父元素设置的样式之外，我们还可以可以伸缩盒子的子元素设置flex属性，用来设置平均分配整个父盒子的空间。
代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下：
如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。
除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下图：
我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.
这是什么意思呢？
四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。
同理，另外三个盒子分别占据2/6,2/6,1/6的宽度，所以就形成了我们现在看到的效果。
原文来源于：黑马程序员社区
学习资源：
想学习css，可以关注：黑马程序员头条号，后台回复：css
SS 在您可以修改的内容方面非常强大，并且该transform属性是最通用和最强大的 CSS 属性之一。在本文中，我将介绍使用transform属性修改 CSS 元素的所有方法。
CSS 中的transform属性只是一种您可以在一个属性中旋转、缩放、移动等元素的方式。由于这种灵活性，如果起初使用起来可能会令人困惑，但本文将消除所有这些困惑。
.class {
transform: rotate(90deg) scale(2) translate(100px, 200px);
}
transform通过组合多个变换函数来获得所需的输出，因此为了理解transform您需要了解每个transform函数。
可能最容易理解的变换函数是rotate. 此函数采用单个参数，即旋转元素的角度。正值将导致顺时针旋转，负值将导致逆时针旋转。
.red {
transform: rotate(10deg);
}
.green {
transform: rotate(-45deg);
}
.blue {
transform: rotate(.25turn);
}
正如您在上面的示例中看到的，我们使用deg和turn单位来定义我们的旋转。deg单位从 0 到 360，而turn单位从 0 到 1。
rotateX您还可以使用、rotateY和rotateZ函数进行 3D 旋转。该rotateZ功能的工作原理与rotate.
rotateX将在水平轴上rotateY旋转一个元素，并将在垂直轴上旋转一个元素。这些可用于翻转元素。
.red {
transform: rotateX(60deg);
}
.green {
transform: rotateY(60deg);
}
.blue {
transform: rotateX(.2turn) rotateY(.2turn);
}
如您所见，我们在 3D 空间中旋转元素，使其看起来被挤压。这种旋转实际上只在处理 3D 元素时才有用。
scale是另一个很容易理解的函数。它可以采用一个或两个参数来确定元素大小的缩放比例。大于 1 的数字会使元素变大，而小于 1 的数字会缩小元素。
.red {
transform: scale(1.25);
}
.green {
transform: scale(.5);
}
.blue {
transform: scale(1.25, .75);
}
当一个参数被传递给scale它时，它会根据传递的数字缩放 X 和 Y 轴相同的量。当两个值传递给scale第一个数字时，将缩放 X 轴，第二个数字将缩放 Y 轴。
此外，如果您愿意，可以使用scaleXandscaleY函数来缩放 X 或 Y 轴。这些函数采用一个参数并在相应轴上缩放元素。
就像rotate您可以在 3D 中缩放一样。为此，您将使用与 and 类似的函数scaleZ，但用于 Z 轴。这同样只对 3D 元素有用。scaleX``scaleY
可能我最喜欢的转换元素的方法是使用translate函数。这个函数像scale函数一样接受一个或两个参数，并将根据提供的值移动一个元素。
.red {
transform: translate(25px);
}
.green {
transform: translate(-25px, 25px);
}
.blue {
transform: translate(0, -25px);
}
透明的彩色箭头表示形状通常放置的位置，而不透明的箭头表示它们在平移后的位置。
你会注意到，当只有一个值被传递给它时，translate它只会影响 X 轴，因此元素向右移动 25 个像素，因为它是一个正值。
当将两个值传递给translate第一个值时，会在 X 轴上移动元素，而第二个值会影响 Y 轴的位置。这意味着绿色箭头向左移动 25 个像素，向下移动 25 个像素。正 Y 值将元素向下移动似乎令人困惑，因为我们通常认为正 Y 意味着向上，但在 Web 开发中，正 Y 值意味着元素在页面中向下移动。
最后，蓝色箭头向上移动了 25 个像素，因为第一个参数设置为 0，第二个参数设置为负 25 个像素。
就像 scale 一样，有一个translateX和translateY函数可以一次只在一个方向上移动一个元素。
该translate属性处理百分比的方式与几乎所有其他 CSS 属性不同，因为它基于元素的大小而不是其父级的大小。
.red {
transform: translate(100%);
}
正如你所看到的，当我们用百分比平移时，我们将元素向右移动了其自身宽度的 100%。这对于通过将元素移动其自身宽度的 50% 或将元素彼此偏移其大小的百分比来使元素居中非常有用。
您现在可能已经猜到了，但translate也可以在 3D 中使用。您可以使用translateZ仅修改 Z 轴的函数或translate3D类似 的函数translate，但接受第三个参数来在 Z 轴上移动元素。同样，这仅对 3D 元素有用。
可能所有transform功能中最没用的是skew. 它允许您通过倾斜形状的边缘来拉伸形状。该skew函数接受一两个参数，就像translate.
.red {
transform: skew(25deg);
}
.green {
transform: skew(15deg, 25deg);
}
.blue {
transform: skew(-15deg, -25deg);
}
如您所见，skew 属性在 X 和 Y 方向上拉伸了我们的形状。通过指定一个参数，我们只在 X 方向上倾斜，而如果我们传递两个属性，第一个在 X 方向上倾斜，第二个在 Y 方向上倾斜。
此外，就像translate您可以使用skewX和skewY在一个方向上倾斜元素而不影响其他方向一样。
不同的是，所有其他transform属性skew都没有任何 3D 版本。
到目前为止，我们已经讨论了单独使用转换，但是如果您想使用多个转换怎么办？这实际上非常简单，因为您可以传递任意数量的函数transform。
.red {
transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
transform: rotate(-.5turn) translateX(-10%);
}
.blue {
transform: scaleX(1.2) scaleY(.8);
}
组合转换变得困难的唯一时候是当您想要在不同的类中修改它们时。
.base-class {
transform: scale(1.2) translateX(5px);
}
.big {
transform: scale(2) translateX(5px);
}
.move {
transform: scale(1.2) translateX(100px);
}
.big.move {
transform: scale(2) translateX(100px);
}
由于transform是一个属性，您需要在修改的每个类之间复制所有值，transform因为如果您只是transform: scale(2)在.big类中写入，它将覆盖整个transform而不只是scale部分。幸运的是，我们可以巧妙地使用 CSS 变量来解决这个问题。
.base-class {
transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));
}
.big {
--scale: 2;
}
.move {
--translate-x: 100px;
}
如您所见，我们现在只更改 CSS 变量，而从未修改实际transform属性。
总体而言，CSStransform非常有用，同时也非常易于理解。到目前为止，最难的部分transform是理解如何跨不同类组合多个变换，但在 CSS 变量的帮助下，这个问题是微不足道的。
SS代码以及最后平移效果见下方
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove; /*定义动画名称*/
animation-duration:5s; /*定义动画时间*/
animation-timing-function:linear; /*定义动画速度曲线*/
animation-delay:2s; /*定义动延迟时间*/
animation-iteration-count:3; /*定义动画的播放次数*/
animation-direction:alternate; /*定义动画播放的方向*/
/* Safari and Chrome浏览器兼容代码 */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:3;
-webkit-animation-direction:alternate;
}
@keyframes mymove{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove{ /* Safari and Chrome浏览器兼容代码*/
from {left:0px;} /*动画开始和结束时的状态*/
to {left:200px;} /*动画中间时的状态*/
}
</style><script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
1、transition-property属性
transition-property 属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的CSS属性改变时，过渡效果才开始。其基本语法格式如下：
transition-property: none | all | property;在上面的语法格式中，transition-property 属性的取值包括none、all和property三个，具体说明如下表所示：
属性值 | 描述 |
none | 没有属性会获得过渡效果。 |
all | 所有属性都将获得过渡效果。 |
property | 定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。 |
2、transition-duration属性
transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。其基本语法格式如下：
transition-duration:time;3、transition-timing-function属性
transition-timing-function属性规定过渡效果的速度曲线，默认值为ease，其基本语法格式如下：
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);transition-timing-function属性的取值有很多，常见属性值及说明如下表所示。
属性值 | 描述 |
linear | 指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。 |
ease | 指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,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）。 |
cubic-bezier(n,n,n,n) | 定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间。 |
4、transition-delay属性
transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下：
transition-delay:time;5、transition属性
transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下
transition：property duration timing-function delay;在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。
*请认真填写需求信息，我们会在24小时内与您取得联系。
