CSS基礎(chǔ)學(xué)習(xí)——?jiǎng)赢?/h2>

2023-4-26    前端達(dá)人

一、CSS3 2D變形（利用Transfrom方法）

1、rotate（angle）
元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: rotate(30deg) ;
        margin: 200px auto;
    }
</style>
<body>
    <div>

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

效果如圖
在這里插入圖片描述
如果當(dāng)rotate里面的值為負(fù)數(shù)時(shí)，比如ratate（-10deg），效果如圖：
在這里插入圖片描述

2、 translate(x,y)方法
通過(guò) translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)。也就是相對(duì)于頁(yè)面左部和頂部的距離 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: translate(20px, 20px);
    }

</style>
<body>

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


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    •

效果如下
在這里插入圖片描述
初次之外還有其他的參數(shù)

transform: translate(200px);
如果只帶一個(gè)參數(shù)，這個(gè)參數(shù)代表的是x方向位移值，y方向位移為0

transform: translateX(200px);
對(duì)X方向移動(dòng)

transform: translateY(200px);
對(duì)Y方向移動(dòng)

3、scale() 方法
通過(guò) scale() 方法，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: scale(2,0.5);
        margin: 20px auto;
    }

</style>
<body>

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


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

效果如圖
在這里插入圖片描述
可以看到，長(zhǎng)邊變?yōu)榱嗽瓉?lái)的兩倍，寬邊變?yōu)榱嗽瓉?lái)的0.5倍

transform: scale(1.5)；x軸和y軸都放大1.5倍
transform: scaleX(1.5)；x軸放大1.5倍
transform: scaleY(1.5)；y軸放大1.5倍
transform-origin: left top;改變中心點(diǎn)位置為左上角，當(dāng)然還可以自由搭配，右下（right bottom），右上（right top）

4、 skew() 方法
通過(guò) skew() 方法，元素翻轉(zhuǎn)給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: skew(30deg,30deg);
        margin: 200px auto;
    }

</style>
<body>

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


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

效果如圖

在這里插入圖片描述
意思就是：圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 30 度。可能看起來(lái)比較抽象

transform: skew(230deg);如果只帶一個(gè)參數(shù)，只有x軸方向的扭曲
transform: skewX(230deg); 對(duì)X軸進(jìn)行翻轉(zhuǎn)
transform: skewY(230deg); 對(duì)Y軸進(jìn)行翻轉(zhuǎn)

其實(shí)還是很好理解的，比如兩個(gè)圖疊加在一起 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .demo{
        width: 200px;
        height: 200px;
        margin: 200px auto;
        border: 1px solid #000;
    }

    .box{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        transform: skew(5deg,0deg);
    }

</style>
<body>
<div class="demo">
    <div class="box"></div>
</div>

</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    •

在這里插入圖片描述
可以看到，所謂的X軸翻轉(zhuǎn)，其實(shí)就是x方向的移動(dòng)，上面的線向左移動(dòng)5px，下面的線向右移動(dòng)5px，加入Y也一樣
比如：transform: skew(0deg,5deg);
在這里插入圖片描述
左邊的線向上移動(dòng)5px，右邊的線向下移動(dòng)5px，同時(shí)改變時(shí) transform: skew(5deg,5deg);

在這里插入圖片描述
最好記的方式就是對(duì)角線的同時(shí)移動(dòng)，左上右下是排斥，左下右上是吸引

5、matrix() 方法
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起。
matrix() 方法需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許您：旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。

如題：將div右移100px,下移200px，旋轉(zhuǎn)30度，x軸縮放1.5倍，y軸縮放2倍。

（1）transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);

（2）transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)

計(jì)算方法
在這里插入圖片描述
效果如圖
在這里插入圖片描述

6、transform-origin 屬性
允許你改變被轉(zhuǎn)換元素的位置
語(yǔ)法： transform-origin: x-axis y-axis z-axis;
屬性值：
x-axis ：定義視圖被置于 X 軸的何處。可能的值：left，center，right，length，%。
y-axis ：定義視圖被置于 Y 軸的何處?？赡艿闹担簍op，center，bottom，length，%。
z-axis ：定義視圖被置于 Z 軸的何處。可能的值：length。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-origin</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .demo{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #000;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #f00;
            transform: rotate(60deg);
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="box"></div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    •

效果如圖
在這里插入圖片描述
形象的來(lái)說(shuō)，就是規(guī)定你從哪個(gè)角開始旋轉(zhuǎn)，比如規(guī)定右下角旋轉(zhuǎn)，則圖形以右下角為旋轉(zhuǎn)角，順時(shí)針旋轉(zhuǎn)60°

二、CSS3 3D變形

1、perspective屬性
perspective 屬性定義 3D 元素距視圖的距離，以像素計(jì)。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。
注釋：perspective 屬性只影響 3D 轉(zhuǎn)換元素。
語(yǔ)法： perspective: number|none;
屬性值：
number ：元素距離視圖的距離，以像素計(jì)。
none ：默認(rèn)值。與 0 相同。不設(shè)置透視 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>perspective</title>
    <style>
        .father{
            position: relative;
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 200px auto;
            border: 1px solid #999;
            perspective: 150px;
        }
        .son{
            width: 100px;
            height: 50px;
            padding: 50px;
            position: absolute;
            border: 1px solid #f00;
            background-color: #0ff;
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    •

效果如圖
在這里插入圖片描述

2、trasform-style屬性
transform-style 屬性規(guī)定如何在 3D 空間中呈現(xiàn)被嵌套的元素。
注釋：該屬性必須與 transform 屬性一同使用。
語(yǔ)法： transform-style: flat|preserve-3d;
屬性值：
flat ：子元素將不保留其 3D 位置。
preserve-3d ：子元素將保留其 3D 位置。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-style</title>
    <style>
        .wrapper{
            width: 200px;
            height: 100px;
            margin: 200px auto;
        }
        .div1,.div2{
            width: 200px;
            height: 100px;
            padding: 20px;
        }
        .div1{
            background-color: #f00;
            transform: rotateY(30deg);
            transform-style: preserve-3d;

        }
        .div2{
            background-color: #655fff;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="div1">div1
        <div class="div2">div2</div>
    </div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    •

效果如圖
在這里插入圖片描述

3、CSS3過(guò)渡
transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過(guò)渡屬性：
transition-property：規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱。
transition-duration：規(guī)定完成過(guò)渡效果需要多少秒或毫秒。
transition-timing-function：規(guī)定速度效果的速度曲線。
transition-delay：定義過(guò)渡效果何時(shí)開始。
注釋：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。
語(yǔ)法： transition: property duration timing-function delay; 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition過(guò)渡動(dòng)畫</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(0deg);
            transition-property: all;
            transition-duration: .8s;
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    •

或者 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition過(guò)渡動(dòng)畫</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(0deg);
            transition: left 2s ease 500ms, width 5s ease-in-out;
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    •

可以自行實(shí)驗(yàn)一下

4、CSS3動(dòng)畫

使用@keyframes
通過(guò) @keyframes 規(guī)則，您能夠創(chuàng)建動(dòng)畫。
創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動(dòng)畫過(guò)程中，您能夠多次改變這套 CSS 樣式。
以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞 “from” 和 “to”，等價(jià)于 0% 和 100%。
0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。
為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關(guān)鍵幀動(dòng)畫</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            /*animation: move 5s ease-in-out infinite alternate ;*/
            -webkit-animation: move 5s ease-in-out 500ms 2 alternate ;
            -moz-animation: move 5s ease-in-out 500ms 2 alternate ;
            -ms-animation: move 5s ease-in-out 500ms 2 alternate ;
            -o-animation: move 5s ease-in-out 500ms 2 alternate ;
            animation: move 5s ease-in-out 500ms 2 alternate ;
        }
        @keyframes move {
            0%{
                left: 100px;
            }
            45%{
                left: 200px;
                top: 100px;
                background-color: #00f;
            }
            75%{
                left: 400px;
                top: 300px;
                background-color: #64ff77;
            }
            100%{
                left: 500px;
                top: 500px;
                background-color: #ff4975;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    •

或者 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>關(guān)鍵幀動(dòng)畫</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            /*animation: move 5s ease-in-out infinite alternate ;*/
            -webkit-animation: move 5s ease-in-out 500ms 2 alternate ;
            -moz-animation: move 5s ease-in-out 500ms 2 alternate ;
            -ms-animation: move 5s ease-in-out 500ms 2 alternate ;
            -o-animation: move 5s ease-in-out 500ms 2 alternate ;
            animation: move 5s ease-in-out 500ms 2 alternate ;
        }
        @keyframes move {
           from{
                left: 100px;
            }
            to{
                left: 500px;
                background-color: #00f;
            }
        }

    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    •

animation:move 5s ease-in-out 500ms 2 alternate

move：表示animation-name ，動(dòng)畫名稱

5s：表示animation-duration，時(shí)長(zhǎng)

ease-in-out：表示animation-timing-function 規(guī)定動(dòng)畫的速度曲線
（
除此以外還有：
linear：動(dòng)畫從頭到尾的速度是相同的。
ease：默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。
ease-in：動(dòng)畫以低速開始。
ease-out：動(dòng)畫以低速結(jié)束。
ease-in-out：動(dòng)畫以低速開始和結(jié)束。
）

500ms：表示animation-delay，規(guī)定在動(dòng)畫開始之前的延遲。

2 ：表示animation-iteration-count，規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。

alternate：表示animation-direction，規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫，如果 animation-direction 值是 “alternate”，則動(dòng)畫會(huì)在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）向后播放。。



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。

分享本文至：

日歷

鏈接

個(gè)人資料

存檔