浅学CSS

CSS

1.css介绍

1.1 什么是CSS？

  • CSS是指层叠样式表 cascading style sheets
  • 通过CSS可以让我们定义HTML元素如何显示。
  • CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
  • 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

2.CSS与HTML结合方式

2.1 第一种方式 内联/行内样式

就是在我们的HTML标签上通过style属性来引用CSS代码。

  • 优点：简单方便 ；

  • 缺点：只能对一个标签进行修饰。

2.2 第二种方式 内部样式表

我们通过<style>标签来声明我们的CSS。通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置

优点：可以通过多个标签进行统一的样式设置

缺点: 它只能在本页面上进行修饰

语法： 选择器 {属性:值;属性:值}

在这里插入图片描述

2.3 第三种方式 外部样式表

我们需要单独定义一个CSS文件,注意CSS文件的后缀名就是.css

在项目根目录下，创建css目录，在css目录中创建css文件 css01.css

在<head>中使用<link>标签引用外部的css文件

/*test01.css*/
h3{
    color:greenyellow
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的使用方式</title>

    <!-- 第三种方式 外部样式表  引入外部样式表的方式1 -->
    <link href="css/test01.css" rel="stylesheet">
</head>

<!-- 第二种方式 内部样式表 -->
<style>
/*
语法： 
    选择器 {
        属性:值;
        属性:值
        }
*/
h2{
    color:purple
}

/* 第三种方式 外部样式表  引入外部样式表的方式2 */
/* @import url(css/test01.css)   存在错误，可能版本不对 */
</style>

<body>
    <!--  第一种方式 内联/行内样式 -->
    <h1 style="color:red">我想要变有钱！</h1>

    <h2>我想要变好看</h2>

    <!-- 第三种方式 外部样式表 -->
    <h3>我想要找到工作</h3>
</body>
</html>

关于外部导入css使用与@import的区别?

  • 加载顺序不同

    • @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
    • 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；

  • @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

  • 三种样式表的优先级：满足就近原则

    • 内联 > 内部 > 外部

3.CSS的使用

3.1 css中选择器

3.1.1 元素(标签)选择器

标签选择器就是html中的标签元素，它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

3.1.2 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

3.1.3 id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。

id选择器，比类选择器更具有唯一性

上述三种选择器的代码如下所示：

<style>
    /* 标签选择器 */
    h1{
        color: crimson
    }

    /* 类选择器 */
    .b{
        color: aquamarine
    }

    /* id选择器 */
    #c{
        color: rebeccapurple
    }

</style>
<body>
    <h1>我要变好看</h1>
    <h2 class="b">我要变漂亮</h2>
    <h3 id="c">我要变有钱</h3>
</body>

3.1.4 选择器组

当有多个元素需要一样的样式时，则可以使用选择器组，用逗号表示，谁和谁。

例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我,你,他{ 
	手机
	}

在这里插入图片描述

3.1.5 派生选择器

子代：父子关系（隔代不管）

后代：父子孙，曾孙，从孙…

在这里插入图片描述

在这里插入图片描述

3.1.6 CSS伪类

CSS伪类可对css的选择器添加一些特殊效果

  • 伪类属性列表：
    • :active 向被激活的元素添加样式。
    • :hover 当鼠标悬浮在元素上方时，向元素添加样式。
    • :link 向未被访问的链接添加样式。
    • :visited 向已被访问的链接添加样式。
    • :first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

<style>
    /* 超链接未点击时 */
    a:link {
        color: blue
    }

    /* 访问过后的 */
    a:visited {
        color: yellow;
        font-size: 30px;
    }

    /* 当鼠标悬停在超链接上时 */
    a:hover {
        color: brown;
        font-size: 50px;
    }

    /* 激活时，也就是长按住超链接，不松手 */
    a:active {
        color: blueviolet
    }

    /* 过滤第一个子元素 */
    li:first-child{
        color: aqua;
        font-size:27px;
    }
</style>

<body>

    <a href="http://lagou.com">拉勾网</a>

    <ul>
        <li>杨洋</li>
        <li>于途</li>
        <li>肖奈</li>
    </ul>
</body>

3.2 CSS 基本属性

3.2.1 文本属性

  • 指定字体：font-family : value;

  • 字体大小：font-size : value;

    • px：像素
    • em：倍数

  • 字体加粗：font-weight : normal/bold;

  • 文本颜色：color : value;

  • 文本排列：text-align : left/right/center;

  • 文字修饰：text-decoration : none/underline;

  • 行高：line-height : value;

  • 首行文本缩进：text-indent : value （2em）

<style>
    #b{
        font-family: "隶书";/*设置字体样式*/
         /*字体大小*/
        /* font-size: 10px;以像素为单位 */
        font-size: 2em;/*以默认字体大小的5倍*/
        font-weight: bold;/*字体加粗*/
        color: aquamarine;
        text-align: center;/*文本排列：text-align : left/right/center;*/
        text-decoration: underline;/*文本修饰下划线*/
        line-height: 100px;/*行高*/
    }
    
</style>

<body>
    <p id="b">我爱学习</p>
    <p id="b">学习不爱我</p>
    <p style="text-indent:10em;">我想好好学习，和学习一起玩耍！</p><br>
    <span>我学习了</span>
</body>

在这里插入图片描述

3.2.2 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

  • background-color 设置元素的背景颜色。

  • background-image 把图像设置为背景。

    background-image: url('img/1.jpg');

  • background-repeat 设置背景图像的墙纸效果，是否及如何重复

    • repeat：在垂直方向和水平方向重复，为重复值
    • repeat-x：仅在水平方向重复
    • repeat-y：仅在垂直方向重复
    • no-repeat：仅显示一次

  • background-position 设置背景图像的起始位置

    • 1：控制水平方向 x轴：

      • 正值，向右移动；
      • 负值，向左移动

    • 2：控制垂直方向 y轴：

      • 正值，向下移动；
      • 负值，向上移动
    • 					<!--X轴   Y轴-->
background-position: 100px 100px;

  • background-attachment 背景图像是否固定或者随着页面的其余部分滚动

    • 默认值是 scroll：默认情况下，背景会随文档滚动
    • 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像
<style>
    div{
        width: 500px;
        height: 1000px;
        background-color: aqua;/*设置背景颜色*/
        background-image: url("img/bj.jpg");/*设置背景图片*/
        background-repeat: no-repeat;/*设置背景图片的效果，有四种形式*/
        background-position: 100px 100px;/*背景的位置*/
        background-attachment:fixed;/*把背景图片固定在一个地方，不会随页面滚动*/

    }
</style>

<body>
    <div>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>

    </div>
</body>

3.2.3 列表属性

CSS列表属性作用如下：

  • 设置不同的列表项标记为有序列表

  • 设置不同的列表项标记为无序列表

  • 设置列表项标记为图像

有两种类型的列表：

  • 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

  • 有序列表 - 列表项的标记有数字或字母

使用CSS设置属性list-style/list-style-type，可以列出进一步的样式，并可用图像作列表项标记。其可取值有如下类型：

  • none：无标记。（去除标记）
  • disc：默认。标记是实心圆。
  • circle：标记是空心圆。
  • square：标记是实心方块。
  • decimal：标记是数字。
  • decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
  • lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
  • upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
  • lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
  • upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)
<style>
    .a {
        /* list-style-type: none; */
        list-style: square;/*这些样式可以选*/
    }

    .b{
        /* 把图片当作标记 */
        list-style-image: url("img/logo.jpg");
    }
</style>

<body>
    <ul class="a">
        <li>杨洋</li>
        <li>于途</li>
        <li>肖奈</li>
    </ul>

    <ol class="b">
        <li>王昭君</li>
        <li>西施</li>
        <li>貂蝉</li>
    </ol>
</body>
练习
<style>
    li{
        list-style-type: none;
        color: green;
        background-color: black;
        width: 150px;
        height: 50px;
        float: left;/*使li行向显示*/

        /* 鼠标光标的样式 */
        cursor: pointer;
    }
    /* 悬浮变色 */
    li:hover{
        color: blueviolet;
        background-color: yellow;
        line-height: 60px;
    }
</style>
<body>
    
    <ul>
        <li>诗歌</li>
        <li>散文</li>
        <li>小说</li>
    </ul>
</body>

在这里插入图片描述

3.2.4 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

<style>
    /* 所有div都需要遵循的修饰 */
    div {
        width: 500px;
        height: 30px;
        margin: 20px;/*div之间产生指定的距离*/
    }

    .a {
        /* 设置整体四个边框的样式 */
        border-style: solid;/*边框样式*/
        border-color: blue;/*边框颜色*/
        border-width: 3px;/*边框宽度*/
    
        /* 设置边框单个方向的样式 */
        border-left-color: brown;/*左边框*/
        /* border-bottom-color: 设置下边框 */
        /* border-top-style: aqua;  设置上边框 */

    }

    .b1{
        border: 10px solid yellow;/*设置整体边框样式*/
    }
    .b2{
        border: 10px dotted green;/*设置整体边框样式*/
    }
    .b3{
        border: 10px dashed pink;/*设置整体边框样式*/
    }
    .b4{
        border: 10px double pink;/*设置整体边框样式*/
    }
    .b5{
        border: 10px groove plum;/*设置整体边框样式*/
    }
    .b6{
        border: 10px ridge gold;/*设置整体边框样式*/
    }
    .b7{
        border: 10px inset brown;/*设置整体边框样式*/
    }
    .b8{
        border: 10px outset rgb(231, 36, 150);/*设置整体边框样式*/
    }
    .b9{
        border: 10px none rgb(166, 209, 177);/*没有边框*/
    }
</style>

<body>
    <div class="a"></div>
    
    <div class="b1">实线</div>
    <div class="b2">点线</div>
    <div class="b3">虚线</div>
    <div class="b4">双线</div>
    <div class="b5">3D效果的凹槽</div>
    <div class="b6">3D效果的脊边匡</div>
    <div class="b7">inset</div>
    <div class="b8">outset</div>
    <div class="b9">none没有边框</div>

</body>

在这里插入图片描述

3.2.5 轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：

  • 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；

  • 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS的 outline 属性规定元素轮廓的样式、颜色和宽度。

在这里插入图片描述

3.2.6 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

在这里插入图片描述

  • margin(外边距) - 盒子与盒子之间的距离

  • border(边框) - 盒子的保护壳

  • padding(内边距/填充) - 内填充，盒子边与内容之间的距离

  • content(内容) - 盒子的内容，显示的文本或图像

在这里插入图片描述

3.3 CSS 定位

3.3.1默认定位

  • 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高

  • 行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高

  • 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

<style>
    div{
        width: 100px;
        height: 50px;
        border: 2px solid purple;
    }

    span{
        width: 100px;
        height: 50px;
        border: 2px dashed rgb(16, 233, 114);
    }

    input{
        width: 50px;
        height: 50px;
        border: 2px dashed rgb(238, 25, 25);
    }

    a{
        width: 50px;
        height: 50px;
        border: 2px dashed rgb(13, 27, 221);
        /* a标签本来是行内元素，默认不可以改变宽高，但是可以通过display将其转换为其他类型
            进而可以改变宽高
         */
         /* display: inline-block;转换为行内块 */
         display: block;/*转换为块级元素*/
    }
</style>

<body>
    <div>块级元素可以指定宽高</div>
    <div>块级元素可以指定宽高</div>
    <div>块级元素可以指定宽高</div>

    <hr>

    <span>行内元素不可以指定宽高，是默认的</span>
    <span>行内元素不可以指定宽高，是默认的</span>
    <span>行内元素不可以指定宽高，是默认的</span>

    <hr>

    <input>行内块，可以指定宽高
    <input>行内块，可以指定宽高
    <input>行内块，可以指定宽高

    <hr>

    <a href="http://baidu.com">百度</a>
    <a href="http://baidu.com">百度</a>
    <a href="http://baidu.com">百度</a>
</body>

在这里插入图片描述

3.3.2 浮动定位

  • 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。

  • float取值：

    • none ：不浮动
    • left：贴着左边 浮动
    • right：贴着右边 浮动
<style>
    .f {
        width: 270px;
        height: 270px;
        border: 2px solid yellow;
    }

    .a,
    .b {
        width: 50px;
        height: 50px;
        border: 2px solid rgb(21, 24, 226);
    }

    .a {
        background: green;
        margin-top: 20px;
        /*相对a来说是外边距，但是相对f来说就是内边距*/
        float: left;
        /*靠左浮动   只有两个元素都开启浮动时才会在一行，如果只有某一个浮动那么只改变那一个*/
    }

    .b {
        background-color: rgb(124, 11, 96);
        margin-top: 20px;
        float: right;
        /*靠右浮动*/
    }
</style>

<body>
    <div class="f">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>

在这里插入图片描述

3.3.3 相对定位

和原来的位置进行比较，进行移动定位（偏移）

<style>
    .f {
        width: 300px;
        height: 300px;
        border: 2px solid black;
    }

    .a,
    .b,
    .c {
        width: 150px;
        height: 50px;
    }

    .a {
        background: pink;
    }

    .b {
        background: yellow;
        /* 设置相对定位    相对于自己原来位置的偏移  */
        position: relative;
        top: 20px;
        /*相对偏移的量   上边偏移20px*/
        left: 60px;
        /*下边偏移60px*/
    }

    .c {
        background: green;
    }
</style>

<body>

    <div class="f">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>

在这里插入图片描述

3.3.4 绝对定位

本元素与已定位的祖先元素的距离

如果父级元素定位了，就以父级为参照物；

如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。

如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

<style>
    .g{
        width: 400px;
        height: 400px;
        background: pink;
        padding-top: 50px;
    }
    .f{
        width: 300px;
        height: 200px;
        background: purple;
        padding-top: 20px;
        position: relative;
    }

    .a,.b,.c{
        width: 100px;
        height: 50px;
    }
    .a{
        background-color: blue;
    }
    .b{
        background-color: green;
        position: absolute;/*当该元素的父级元素已经定位了，则就是相对于父级元素的绝对定位，
                            若父级元素没有定位，就找父级的父级，直到有定位的祖先元素，
                            若祖先元素都没有定位，那么就直接以body为定位参照
                            */
        top: 30px;/*上边距离父级元素30px*/
        left: 50px;
    }
    .c{
        background-color: yellow;
    }
</style>

<body>
    <div class="g">
        <div class="f">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>
    </div>
</body>

在这里插入图片描述

3.3.5 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

在这里插入图片描述

3.3.6 z-index

如果有重叠元素，使用z轴属性，定义上下层次。

注意：

z轴属性，要配合相对或绝对定位来使用。

z值没有额定数值（整型就可以，具体用数字几，悉听尊便），谁的z值越大，谁在上面

在这里插入图片描述

4. CSS3

4.1 圆角

border-radius：左上 右上 右下 左下;

border-radius：四个角;

border-radius：50%; 圆形

在这里插入图片描述

4.2 盒子阴影

box-shadow：1 2 3 4 5;

  • 1：水平偏移
  • 2：垂直偏移
  • 3：模糊半径
  • 4：扩张半径
  • 5：颜色

在这里插入图片描述

4.3 渐变

4.3.1 线性渐变

在线上慢慢的渐变

background:linear-gradient([方向/角度]，颜色列表)；

<style>
    div{
        width: 150px;
        height: 50px;
    }

    .a{
        /* 背景颜色线性渐变 
         background:linear-gradient([方向/角度]（使用中括号说明可以省略不写，颜色列表)；
         默认是从上往下渐变*/
        background: linear-gradient(pink,purple,red);
    }

    .b{
            /* 从下往上渐变 */
        background: linear-gradient(to top, pink,purple,red);
    }

     .c{
         /* 横向渐变  */
        background: linear-gradient(to left,blue,purple,black);
    }

    .d{
         /* 斜上渐变  */
        background: linear-gradient(to top left,blue,purple,black);
    }

    .e{
         /* 指定角度渐变  */
        background: linear-gradient(45deg,blue,purple,black);
    }
    .f{
         /* 指定角度渐变  */
        background: linear-gradient(30deg,blue,purple,black);
    }
</style>
<body>
    <div class="a"></div><br><br>
    <div class="b"></div><br><br>
    <div class="c"></div><br><br>
    <div class="d"></div><br><br>
    <div class="e"></div><br><br>
    <div class="f"></div>
</body>

在这里插入图片描述

4.3.2 径向渐变

以圆心向外发散

background: radial-gradient(颜色列表);

<style>
    div{
        width: 150px;
        height: 150px;
    }

    .a{
        /* 背景颜色径向渐变 
         background: radial-gradient(颜色列表);*/
        background: radial-gradient(pink,purple,red);
    }

    .b{
        background: radial-gradient(pink,purple,red);
    }

     .c{
         border-radius: 50%;
        background: radial-gradient(blue,purple,black);
    }
</style>
<body>
    <div class="a">径向渐变</div><br><br>
    <div class="b">以原点向外发散渐变</div><br><br>
    <div class="c"></div>
    
</body>

在这里插入图片描述

4.4 背景

4.4.1 背景位置

background-origin：指定了背景图像的位置区域

border-box : 背景贴边框的边

padding-box : 背景贴内边框的边

content-box : 背景贴内容的边

<style>
   div{
        width: 150px;
        height:150px;
        background: url("img/hh.png") no-repeat;
        margin: 20px;
        border: 10px dashed green;
        padding: 20px;
    }
.a{
    background-origin: border-box;
}
.b{
    background-origin: padding-box;
}
.c{
    background-origin: content-box;
}
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

在这里插入图片描述

4.4.2 背景裁切

background-clip:

border-box 边框开切

padding-box 内边距开切

content-box 内容开切

<style>
   div{
        width: 150px;
        height:50px;
        background: palegreen;
        margin: 20px;
        border: 10px dashed rebeccapurple;
        padding: 20px;
    }
.a{
    background-clip: border-box;/*边框开切*/
}
.b{
    background-clip:padding-box;/*内边距开切*/
}
.c{
    background-clip:  content-box;/*内容开切*/
}
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>

在这里插入图片描述

4.4.3 背景大小

background-size:

cover 缩放成完全覆盖背景区域最小大小

contain 缩放成完全适应背景区域最大大小

<style>
   div{
        width: 150px;
        height:150px;
        background: url("img/bj.jpg") no-repeat;
        margin: 20px;
        border: 10px dashed rebeccapurple;
        
    }
.a{
    /* 缩放成完全覆盖背景区域最小大小   
    如果div大小放不下一张完整的图片，那么图片的剩余部分将不会显示出来 */
    background-size: cover;
}
.b{
    /* 缩放成完全适应背景区域最大大小 
    将图片等比缩放显示在div中，不管div是否完全覆盖*/
    background-size:contain;
}

</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>

在这里插入图片描述

4.5 过渡动画

4.5.1 过渡

从一个状态到另一个状态，中间的“缓慢”过程；需要触发时间

缺点是，控制不了中间某个时间点。

transition｛1 2 3 4｝

1：过渡或动画模拟的css属性

2：完成过渡所使用的时间（2s内完成）

3：过渡函数。。。

  • linear 匀速
  • ease 逐渐慢下来
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/38520dabeeb8427aa083eec0a772674a.png#pic_center在这里插入图片描述

4：过渡开始出现的延迟时间

transition: width 2s ease 1s;

目前，css3只开发出部分的过渡属性，下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsO1v1aU-1659797354494)(D:\blog\Notes\lagou\前端\CSS\CSS.assets\过渡属性.png)]在这里插入图片描述

<style>
    div{
        width: 70px;
        height: 70px;
        border: 5px solid purple;
        margin: 20px;
    }
    .a{
        /* 设置div的过渡事件 */
       /*四个参数：过渡所要完成的改变，  完成过渡事件的时间   过渡函数   过渡的延迟时间 */
        transition: width 2s linear 1s;
    }

    .b{
        background-color: blue;
        transition: background-color 2s ease-in-out 1s;
    }

    /* 触发过渡事件 */
    .a:hover{ width: 400px;}/*把width由原来的70px变为400px*/
    .b:hover{background-color:pink;}/*把原来的背景颜色变为pink*/
</style>
<body>
    <div class="a"> 我想要快点学完！！！</div>
    <div class="b"> 我想要看帅哥美女</div>
 
</body>

4.5.2 动画

从一个状态到另一个状态，过程中每个时间点都可以控制。

  • 关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }

  • 动画属性：animation{ 1 , 2 , 3 , 4 , 5 }

    • 1：动画帧
    • 2：执行时间
    • 3：过渡函数
    • 4：动画执行的延迟（可省略）
    • 5：动画执行的次数

需求1：一个 元素从左向右移动，3秒内执行2次

<style>
    div {
        width: 700px;
        border: 5px solid purple;
        margin: 20px;
    }

    /* 设置动画的关键帧 */
    @keyframes img1{
        from{
            margin-left: 0px;
        }
        to{
            margin-left: 550px;
        }
    }

    /* 动画属性：animation{ 1 , 2 , 3 , 4 , 5 } */
    img{
        animation: img1 3s linear 2;
    }

</style>

<body>
    <div>
        <img src="img/hh.png">
    </div>
</body>

需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行

infinite：无限次

alternate：来回执行（交替，一去一回）

<style>
    .out {
        width: 700px;
        height: 100px;
        border: 5px solid purple;
    }

    .in{
        width: 50px;
        height: 40px;
        margin-left: 10px;
        border: 5px solid rgb(75, 10, 226);
    }

    /* 设置动画的关键帧 */
    @keyframes img2{
        0%{margin-left: 0px}
        10%{background-color: pink}
        30%{background-color: green;
            border: 10px dashed yellow;
            }
        60%{ background: linear-gradient(45deg,blue,purple,black);}
        90%{background: radial-gradient(pink,purple,red);
            margin-left: 640px;
            }
    }

    /* 动画属性：animation{ 1动画帧 , 2执行时间 , 3过渡函数 , 4动画执行的延迟(可省) , 5动画执行的次数 } */
    .in{
        animation: img2 3s linear infinite alternate;
        /*
        infinite:表示执行无限次
        alternate：来回执行（交替，一去一回）
        */
    }

</style>

<body>
    <div class="out">
        外层div
        <div class="in">内层div</div>
    </div>
</body>

gin-left: 550px;
}
}

/* 动画属性：animation{ 1 , 2 , 3 , 4 , 5 } */
img{
    animation: img1 3s linear 2;
}
```

需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行

infinite：无限次

alternate：来回执行（交替，一去一回）

<style>
    .out {
        width: 700px;
        height: 100px;
        border: 5px solid purple;
    }

    .in{
        width: 50px;
        height: 40px;
        margin-left: 10px;
        border: 5px solid rgb(75, 10, 226);
    }

    /* 设置动画的关键帧 */
    @keyframes img2{
        0%{margin-left: 0px}
        10%{background-color: pink}
        30%{background-color: green;
            border: 10px dashed yellow;
            }
        60%{ background: linear-gradient(45deg,blue,purple,black);}
        90%{background: radial-gradient(pink,purple,red);
            margin-left: 640px;
            }
    }

    /* 动画属性：animation{ 1动画帧 , 2执行时间 , 3过渡函数 , 4动画执行的延迟(可省) , 5动画执行的次数 } */
    .in{
        animation: img2 3s linear infinite alternate;
        /*
        infinite:表示执行无限次
        alternate：来回执行（交替，一去一回）
        */
    }

</style>

<body>
    <div class="out">
        外层div
        <div class="in">内层div</div>
    </div>
</body>
版权声明：本文为m0_63640914原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。