黑马程序员技术交流社区

标题: 如何通过css样式设置动画，转换，过渡等界面酷炫效果 [打印本页]
作者: 长沙-小知姐姐    时间: 2019-4-8 10:25
标题: 如何通过css样式设置动画，转换，过渡等界面酷炫效果
本帖最后由 长沙-小知姐姐 于 2019-4-8 10:42 编辑

今天是我们最后一天学习css3的样式。
今天我们讲解的内容有：过渡，动画，转换，伸缩盒子。
可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果  So Easy！~~

1.过渡
在css3中，有一个属性可以设置过渡效果。
它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。
A.案例：通过transition设置焦点过渡效果

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
​
<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 lang="en">
​
<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 lang="en">
​
<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 class="parent">
        <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 lang="en">
​
<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 class="parent">
        <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 lang="en">
​
<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 class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
​
</html>

效果如下：

如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。
除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：

<!DOCTYPE html>
<html lang="en">
​
<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 class="parent">
        <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的宽度，所以就形成了我们现在看到的效果。

小结：通过一些案例我们简单给大家介绍了一下伸缩盒子的使用，但是实际上，伸缩盒子还有更加复杂的布局应用，大家如果想要知道更加复杂的应用和使用，来找小知老师吧，给你助攻哦！~~







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2