CSS基础

m0_74074214

已于 2024-07-22 18:59:00 修改

阅读量810

点赞数 20

文章标签： css 前端

于 2024-07-20 16:31:54 首次发布

本文链接：https://blog.csdn.net/m0_74074214/article/details/140567908

版权

一.盒子模型

1.1盒子模型的默认样式

在我们使用html的盒子模型来制作网页时，html标签都会有自己内置的CSS的特殊元素值。比如，body里的元素并不是紧贴左上角，因为body的外边距margin有个默认值8px。我们管这些默认值称之为默认样式

在我们设计网页的时候，这些默认样式会影响我们自己设置的页面布局，我们一般都需要消除掉这些默认样式，我们可以借助第三方的css文件来进行处理，只需要在head标签里设置一个link标签就可以实现，我们一般有两个css样式表：

reset.css：该文件的作用，是取消几乎所有元素的默认样式

normalize.css: 该文件的作用，是设置一些通常的尺寸。

有了这两个文件，我们就可以演示一个实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS默认样式</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
   <style>
 div{
            border: 10px solid red;
            width:400px;
            height: 400px;
        }
   </style>
</head>
<body>
    <div></div>
</body>

</html>

运行结果如下：

通过上述的代码和运行结果可以发现，我们引用了normallize.css文件，使得div紧紧贴着左上角，把body的外边距8px给消除了。

1.2 轮廓和圆角

轮廓和圆角相对来讲很好理解，有两个属性，分别是 box-shadow 和 border-radius

一个具体案例如下：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border: 1px red dashed;
            width: 300px;
            height: 300px;
            background-color: #bfa;
           
            box-shadow: 100px 100px rgba(255,0,100, .5); 
            border-radius: 50%;
            

        }
       
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果如下：

通过上述的代码和运行结果我们可以发现，阴影的宽度与高度被我们选择的属性固定了，都是100px，并且圆角也被我们设计成了圆形

二.元素的浮动

4.1 文档的流层和浮动的简介

文档的流层：

css把整个页面当成一种有很多层数的结构
我们所能看到的称之为最顶层，最底层称之为文档流层。
所有的元素，默认都是布局在文档流层的。如果不在文档流层，就应该在其他层
文档流层里的元素：
- 块元素
1. 单占一行
2. 块元素的宽，默认状态下是要撑满父元素的，也就是由父元素决定
3. 块元素的高，默认状态下是内容区的数据所占大小
4. 块元素是垂直排列，自上而下。
- 行内元素
1. 只占本身大小
2. 行内元素的宽和高是由内部的文字或元素决定的。
3. 行内元素的排列，从左到右，当在一行装不下时，会自动换行，继续从左到右(与书写顺序一致)

这两个元素和我们之前学写的一致，之后我们简单介绍一下浮动；

浮动的简介：

通过设置浮动属性，可以使子元素向父元素的左边或右边移动，我们利用folat属性来实现，它可以选择的值由以下几种：

1.none 默认值，不浮动

2.left 向左浮动

3.right 向右浮动需要注意的是：

1.在元素设置浮动后，水平布局将不再成立

2.在设置浮动后，元素将不再占用文档流的位置，在子元素下方的兄弟元素会自动上移，

我们可以简单总结一下浮动的特点：

浮动元素不再占据文档流中的位置，设置浮动以后元素会向父元素的左侧或右侧移动，
浮动元素默认不会从父元素中移出，浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
如果浮动元素的上边是一个没有浮动的块元素，那么浮动元素无法上移
浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

我们可以演示一个案例来验证一下这些特点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
#outer{
    width: 800px;
    height: 600px;
    background-color: aqua;
    margin: 0 auto;
}
.box1,.box2,.box3{
    width: 200px;
    height: 200px;
}
.box1{
    background-color: blue;
    float: right;
}
.box2{
    background-color: orange;
    float: left;
}
.box3{
    background-color: grey;
    float: left;
}
    </style>
</head>
<body>
    <div id="outer">
    <div class="box1">阿斯顿发送到发是否达到发送到发送到发送到发送到发生发大水发大水发大是大非</div>
    <div class="box2"></div>
    <div class="box3"></div>
   </div>
</body>
</html>

运行结果如下：

通过运行结果我们可以发现，这三个div同时设置了浮动，蓝色的div向右侧浮动，黄色和灰色的div在左侧浮动，他们三个相同高度，黄色和黑色时兄弟元素，所以他们一定会一样高。

4.2浮动的其他特点

除了上述浮动的一些特点，还有一些其他的特点：

比如，哥哥元素设置了浮动，弟弟元素中的文字会会自动环绕在哥哥元素周围

在脱离文档流后，元素的一些特点也会发生变化，

块元素：设置为浮动之后，将不再独占页面内的一行了，脱离文档流之后，块元素的宽度和高度都被内容撑开了；

行内元素：行内元素在设置成浮动后，其特点和浮动后的块元素的特点类似。

接下来我们演示一个案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动元素的其他特点</title>
    <style>
.box1{
    /* 浮动的块元素的宽和高默认情况下是被内容撑起来的，当然也可以设置具体的宽高 */
    /* width: 100px;
    height: 100px; */
    background-color: olive;
    /* margin: 0  auto;因为设置了浮动，所以居中失效· */
    float: left;
    /* 设置浮动以后，可以看到p段落里的文字是环绕着div的，并没有被div覆盖 */

}
span{
    float: left;
    /* 行内元素如果设置了浮动，就不具备了行内元素的所有特点了，而是可以设置各种属性 */
    width: 300px;
    height: 50px;
    border: 1px solid  red;
    /* 行高属性设置与height值相同时，可以使文字居中， */
    line-height: 50px;
}
</style>
</head>
<body>
    <div class="box1">你好，我是mi</div>
    <p>凭立窗前望雪。雪花在天地间不急不慢地漫扬，雪花在玻璃外面如粉如绒，急的时候如白线，就如同流动的窗帘花，又像是瀑布，还似是幕布挂满窗帘，煞是好看。雪花在风的吹拂下，时而袅袅飞来，时而飘然而去，看着、看着，雪花不由得飘到了窗前，忽一阵风又把她招回去了。当你索性推开窗子，这时候有的雪花像是心有灵犀似的，真就探头探脑地进来了，与你来一次亲密接触；有的雪花探探头又缩回去了，这便更增添了望雪的兴致。乘着兴致你不妨走下楼去，仰头望向天空，沐浴在雪中，这种感受又不同了，这是雪对你最亲密地、频繁地接触，四周的雪花都会纷纷向你扑来，凉飕飕的雪花冷不丁地拍打在脸上、身上，感怀却在心里，此时的你定会感到幸福的。雪花的节奏时而明快、时而舒缓，时而不缓不疾，多么浪漫、多么惬意，沐浴在雪中，总会使人感慨万千，也总会令人心旷神怡。　　每日睁开眼，世界都是单调的一色，没有鸟鸣，没有温和，一颗心被紧紧地包裹在厚重的棉衣下，躯体时时刻刻都在寻求温暖的路上奔波。我们都在冬季寻求着温暖的慰藉，殊不知，最荒芜，最寒冷的莫过于心灵。心若有梦，又岂惧这寒冷的冬季。想想明朝大儒宋濂，从小家境贫寒，只能把别人的书借回来手自笔录，记日以还，然后再苦学。尤其读到他求学的过程时，每每让人感动落泪，大冬天，砚台都结了冰，手指都被冻的麻木了，他从来不敢懈怠。正是这种不畏寒冷，刻苦学习的精神，才使他观遍全书。成人之后，他又长途跋涉去外乡求学，负箧曳屣，行深山巨谷中，穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则袍敝衣处其间，略无慕艳意。以中有足乐者，不知口体之奉不若人也。我们的古人给我们留下着太多的财富，而我们却往往把这一切当作是不可能再实现的传说，眼观四周，人心浮躁的让人惊叹。</p>
    <div class="box2">aaaaaa</div>
    <span>我是一个span</span>
</body>
</html>

运行结果如下：

由代码和运行结果我们可以发现：块元素在设置浮动之后，默认就是由内容撑起来宽和高了，但是我们还可以自己去设置，而他的兄弟元素会自动的环绕在浮动的元素周围，

而span原本是行内元素，在设置浮动后，也具有了块元素的特点，已经可以设置高和宽了。

4.3网页的简单布局

在这里我们书写一个案例来解释：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
<style>
.c1{
        width: 1910px;
        height: 940px;
        background-color: aqua;
        border: 5px solid violet;
    }
.c2{
    width: 1884px;
    height: 100px;
    border: 3px solid burlywood;
    background-color: bisque;
    margin: 10px;
}
.c3{
    width: 192px;
    height: 550px;
    border: 3px solid burlywood;
    margin: 10px;
    background-color: blanchedalmond;
}
.c4{
    width: 702px;
    height: 253px;
    border: 1px solid burlywood;
    border-radius: 10px;
    background-color: goldenrod;
    float: left;
    margin: 10px;
}
.c5{ width: 1426px;
    height: 253px;
    border: 1px solid burlywood;
    border-radius: 10px;
    margin: 10px;
    background-color: palegreen;
}
.outer{overflow: auto;

}
#d1,#d2,#d3,#d4{
    float: left;
}
#d2{
    width: 1448px;
    height: 550px;
    border: 3px solid burlywood;
    margin: 10px;
}


</style>

</head>
<body>
<div class="c1">
    <div class="c2">logo区</div>
    <div class="c2">导航区</div>
    <div class="c3" id="d3">侧边栏</div>
    <div  id="d2" class="outer">
        <div class="c5" class="inner">文章区</div>
        <div class="c4" class="inner">图片区</div>
        <div class="c4" class="inner">视频区</div>
    </div>
    <div class="c3" id="d1">侧边栏</div>
    <div class="c2" id="d4">网页的页脚</div>
   
</div>
</body>
</html>

运行结果如下：

通过运行结果，我们可以发现，在学习了浮动之后，我们可以更好的设计水平网络布局，在上述的代码中，我多次使用了class类选择器，这样代码的可读性比较高。

4.4 高度塌陷问题以及解决方案

很多情况，我们在设计父元素时，通常不会设计他们的高，默认是由子元素撑起来的，但是这样的话，一旦我们对子元素这只了浮动，那么就会出现问题，高度可能会塌陷，这个问题是必须要解决的，否则会影响制作出来网页的美观性。

高度塌陷的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 
        解决父元素的高度坍塌问题有以下四种方式，第四种是最优解。
        1.设置父元素的高度，但是违背了父元素的高度让子元素撑起来的意愿
        2.设置父元素的属性overflow为hidden。原理是使用了BFC概念。
        3.使用在最后一个浮动的子元素后面添加一个空的div并给该元素添加属性
           clear：both，该方式，添加了一个不该存在的div，代码冗余
        4.使用父元素的伪元素选择器解决问题
        */
        #outer{
            border: 1px solid red;
            width: 600px;
            margin:0 auto ;

        }
       
#inner{
    border: 1px solid blue;
    height: 300px;
    width: 300px;
    /* 设置了浮动效果，父元素的高度不会被子元素撑起来，会出现坍塌问题 */
    float: left;
}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">

        </div>
    </div>
</body>
</html>

如果运行这段代码，就会出现高度塌陷；

我们可以发现，本来此时应该是红色边框的父元素现在由于没有高度，变成了一条红线，为了解决这种问题，我们有对应的几个方法：

解决父元素的高度坍塌问题有以下四种方式，第四种是最优解。

1.设置父元素的高度，但是违背了父元素的高度让子元素撑起来的意愿

2.设置父元素的属性overflow为hidden。原理是使用了BFC概念。

3.使用在最后一个浮动的子元素后面添加一个空的div并给该元素添加属性

clear：both，该方式，添加了一个不该存在的div，代码冗余

4.使用父元素的伪元素选择器解决问题

我们继续使用上面的实例，来做一个演示：

   #outer::after{
    /* 在父元素的内容区最后插入一个空字符串，因为有文字，应该会环绕浮动的子元素周围 */
   content: "";
   /* 将不存在的这个伪元素设置成块元素的样式 */
   display: block;
   /* 清除伪元素两侧的浮动效果 */
   clear:both;
}

这段代码直接放到上一个实例的style中即可解决高度塌陷问题

返回结果如下

此时父元素也有了高度，高度塌陷问题得以解决

4.5clearfix

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可

在父元素的class属性上，添加clearfix.
在style中设置

.clearfix{
    content:"";
    display: table;
    clear: both;
}

需要注意的是： clearfix是css中内置的class的值, 不能随便起名，必须用这个单词。

一个演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 500px;
            background-color: salmon;
            /* border: 1px solid blue; */
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: seagreen;
            margin-top: 30px;
            float: left;
        }
  
        .clearfix{
            content:"";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

返回的结果如下：

在父元素中设置了class元素clearfix后，高度塌陷和外边距问题都得到了解决，非常好用

三.元素定位

3.1 定位的简介和相对定位：

相对定位的概念：

1. 如果设置了相对定位，没有改变偏移量，则元素不会移动

2. 相对的位置是元素所在文档流的位置。

3. 设置了相对定位的元素，不会脱离文档流

4. 设置了相对定位的元素提高了自己的层级

5. 设置了相对定位的元素，本身的性质不会改变，块依旧是块元素，行内依旧是行内元素

偏移量：

top：数值是正值，表示向下移动

bottom: 数值是正值，表示向上移动

left：数值是正值，表示向右移动

right：数值是正值，表示向左移动一般情况下上下，左右，选择其中一个即可

我们设计了一个实例来研究这个问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,
        .box2,
        .box3{
            width: 300px;
            height: 300px;
        }
        .box1{
            background-color: aqua;
        }
        .box2{
            background-color: violet;
            /* 开启相对定位，   一定要记住，是相对他之前在文档流的位置 */
            position: relative;
            /* 设置偏移量 */
            top: 100px;
            left: 100px;
        }
        .box3{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"> </div>
        <div class="box2"> </div>
            <div class="box3"> </div>

           
       
   
</body>
</html>

运行结果是这样的：

可以发现，第二个元素块的位置相对于之前来讲，向下偏移了100px，像右偏移了100px，偏移量用left和top去定义即可。

3.2 绝对定位

绝对定位：当属性position的值为absolute，就开启了绝对定位

1. 如果设置了绝对定位，不改变偏移量，则该元素不会移动

2. 设置了绝对定位的元素会脱离文档流，如果下面的兄弟没有设置浮动或定位，则向上移动

3. 设置了绝对定位的元素的位置是相对于所在的包含块。

4. 设置了绝对定位的元素的性质会发生改变。行内元素变成块元素，此时所有的元素宽和高默认都是内容撑开的。

5. 设置了绝对定位的元素提高了层级。

包含块的概念：

如果设置了绝对定位，那么该元素是相对于距离他最近的设置了相对定位的祖先块元素。

如果所有的祖先块元素都没有设置相对定位，那么就是相对HTML这个根元素来说的

建议：包含块尽量设置相对定位，因为相对定位不会脱离文档流

简而言之，最近的设置了相对定位的祖先块称之为包含块。

HTML：是所有元素的初始包含块。

下面用一个案例来演示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       
 .box1,.box4,.box3{
    width: 200px;
    height: 200px;
 }
 .box1{
    background-color: aqua;
 }
 .box3{
    background-color: blueviolet;
 }
 .box4{
    background-color: orange;
    /* 因为box2想要相对box4进行绝对定位，因此box4需要开启相对定位 */
    position: relative;
 }
 .box5{
    width: 150px;
    height: 150px;
    background-color: pink;
 }
 .box2{
    width: 100px;
    height: 100px;
    background-color: gray;
    /* 开启绝对定位，注意，相对的是它的包含块，包含块必须开启相对定位 */
    position: absolute;
    left: 50px;
    top: -150px;
 }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">4
         <div class="box5">5
            <div class="box2">2</div>
         </div>
    </div>
    <div class="box3">3</div>
</body>
</html>

运行结果如下：

首先，div2的绝对定位是相对于div4来说的，如果想要开启div2的绝对定位，就必须现开启div4的相对定位，因为div4是div2的包含块。

3.3 固定定位

固定定位指的是某一个元素块相对于浏览器的视口是固定不动的，由于有这个特性，可以使用固定定位来制作网页的广告

当position的值设置为fixed时，就是开启了该元素的固定定位

固定定位的特点：

1. 固定定位也是一种绝对定位，特点和普通的绝对定位差不多但是不需要设定相对定位

2. 固定定位的位置是相对于当前浏览器的视口(viewport)来说的

因此，固定定位的元素不会随着滚动条去滚动。

我们用一个案例来加深理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
  
.box1{
    width: 200px;
    height: 200px;
    position: fixed;
    background-color: blueviolet;
    left: 100px;
    top: 100px;
}
.box2{
    width: 200px;
    height: 2000px;
    background-color:brown;
}
.box3{
    width: 200px;
    height: 200px;
    background-color:chartreuse;
}
</style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

通过这两张图片，可以很明显的发现蓝紫色的元素块并不会随着滚动条的移动而移动，适合用来作为广告位。

3.4 粘滞定位

粘滞定位的学习：

当position的值为sticky时，则开启的元素的粘滞定位

粘滞定位的特点：

1. 粘滞定位的特点和相对定位的特点差不多。

2. 粘滞定位的不同之处，在于当到达某一个固定位置时，粘住不动。

3.注意粘滞定位的位置不能超出父元素的范围。否则粘滞效果消失

我觉得粘滞定位的作用也是打广告，比较适合横屏的网页，

下面演示一个实例：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘滞定位的演示</title>
    <style>

        body{
            width: 80000px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color:brown;
            position:sticky;
            /* 设置偏移量是相对视口的设置，当元素到达指定位置时，就粘住不动了*/
            top: 50px;     
            left: 200px;    
        }
        .box3{
            width: 5000px;
            height: 2000px;
            background-color:chartreuse;
        }
        .box11{
            width: 200px;
            height: 200px;
            background-color:grey;
        }
        .box11,.box2{
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box11"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

3.5元素的层级index

对于开启了定位元素，可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高越优先显示

如果元素的层级一样，则优先显示靠下的元素

祖先的元素的层级再高也不会盖住后代元素

这个理解起来比较简单，我们需要设置一个属性来定义哪个元素在上方，哪个元素在下方

具体案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     

         .box1{
             width: 200px;
             height: 200px;
             background-color: black;
             position: absolute;
             z-index: 3;
         }

         .box2{
             width: 200px;
             height: 200px;
             background-color:pink;
             position: absolute;
             left:50px;
             top: 50px;
             z-index: 2;
         }

         .box3{
             width: 100px;
             height: 100px;
             background-color:blue;
             position: absolute;
             left: 100px;
             top:100px;
             z-index: 1;
         }

    </style>
</head>
<body>
        <div class="box1"></div>
        <div class="box2">
                <div class="box3"></div>
        </div>
</body>
</html>

很明显，黑颜色的是div1，粉颜色的是div2，他们都开启了绝对定位，但是div1的层级比div2高，所以说div1会显示在上方，而div3是div2的子元素，所以说蓝色会盖过粉色，

四.动画

4.1过渡

动画的过度需要在style标签中设置 transition property的属性，在多个属性之间，应该使用逗号隔开，还会有transiton-duration, transition-timing-function , transition-delay等属性，需要我们一一去设置。

transition-property: width,height;
          transition-duration: 3s;
          transition-timing-function: linear;
          transition-delay: 2s;

但是我们可以使用一个transition标签来设置多个属性，形如：

transition: width ,height,3s 2s linear;

这两段代码的含义是相同的，但是第二种方式可以明显提高可读性，减少代码冗余。

我们可以通过一个案例来感受动画过度的具体过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画的过度演示</title>
    <style>
      
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 50%;
        }
        /* 设置过度 */
        div:hover{
          width: 400px;
          height: 400px;
          
          transition: width ,height,3s 2s linear;
    }

    </style>
   
</head>
<body>
   <div>

   </div> 
</body>
</html>

运行结果如下：

我们可以看出，原本设置的宽和高都是200px，但是经过过度动画之后变成了400px。

4.2动画

动画与过渡类似，都是可以进行一些动态的效果，但是动画与过渡的区别是：

过渡需要改变属性，但是动画不需要，动画需要设置关键帧来完成运动过程。

此外，动画还必须对元素设置相对定位，因为关键帧设置的是偏移量的改变。

与过渡类似的是，在设置动画的时候同样需要设置动画内部的各个属性：

  animation-name: run;       /* 用于指定要使用的关键帧的名字 */   
            animation-duration: 3s;      /* 动画执行的整个过程需要的时间 */  
            animation-timing-function: ease;    /* 动画如何运行 */ 
            animation-delay: 2s;    /*  动画的延迟时间*/ 
            animation-iteration-count: 2;    /* 动画的执行次数 */ 
            animation-direction: normal;    /* 动画的执行方向 */ 
            animation-fill-mode: forwards;    /* 动画的填充（结束后停止的位置）

这是我设计的一个案例内容，通过代码可以发现，动画的属性相对较多，有7个

动画的执行方向可选值还有反方向：reverse

如何运行还可以选择以下的值：

ease 先加速，再减速

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速再减速

当然，动画的各种属性也都可以放到一起来写：

   /* animation: run 10s linear 2s infinite reverse ; */

这样操作也可以提高代码块的可读性，降低代码冗余

4.3变形

我们可以通过变形来改变元素的形状和位置，本质就是3D转换，可以选择x轴，y轴，z轴

属性是transform，对应的属性值有三类：

第一类：平移

translateX(像素) 正值向右平移，即沿着X轴平移，负值向左平移

translateY(像素) 正值向下平移，即沿着Y轴平移，负值向上平移

translateZ(像素) 正值突脸，即沿着X轴平移，负值远离脸，需要开启视距（脸与屏幕的距离）

第二类：旋转

rotateX(度数)：以X轴为轴心，进行旋转

rotateY(度数)：以Y轴为轴心，进行旋转

rotateZ(度数)：以Z轴为轴心，进行旋转

第三类：缩放

scaleX(倍数)：水平方向即（X轴方向）缩放

scaleY(倍数)：垂直方向即（Y轴方向）缩放

scaleZ倍数)： Z轴方向缩放

scale（倍数）相当于scaleX和scaleY的合并

具体案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画的变形</title>
    <style>
       
        #d1{
            width: 300px;
            height: 300px;
            background-image: url(./images/2.jpg);
            margin: 50px auto;
        }
        #d1:hover{
           
            transform: perspective(500px) translateX(100px) translateY(100px)  translateZ(100px)

            
        }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>

通过上述的运行结果我们也可以发现，可以把transform的赋值都写在一起。

m0_74074214

关注

20
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

文档的流层：css把整个页面当成一种有很多层数的结构我们所能看到的称之为最顶层，最底层称之为文档流层。所有的元素，默认都是布局在文档流层的。如果不在文档流层，就应该在其他层文档流层里的元素：- 块元素1. 单占一行2. 块元素的宽，默认状态下是要撑满父元素的，也就是由父元素决定3. 块元素的高，默认状态下是内容区的数据所占大小4. 块元素是垂直排列，自上而下。- 行内元素1. 只占本身大小2. 行内元素的宽和高是由内部的文字或元素决定的。
复制链接

扫一扫