2022.3.18内容回顾-CSDN博客

本文链接：https://blog.csdn.net/loxia/article/details/123588704

1.2d移动

transform：translate（x,y）移动不脱标不影响兄弟盒子的布局括号里可以写px 可以写百分比

transform：translateX（）水平方向移动

transform：translateY（）垂直方向移动

如果只写一个值，默认是x 水平方向

translate（）如果值是百分比的话，百分比的大小按照自身的宽度决定

要点：2d移动通常用作子盒子在父盒子中水平和垂直居中

以下为实现方式：

列举了两个方法作对比，可以发现，transform：translate（）百分比可以省去计算的麻烦

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {
            /* 要求：要实现盒子在父盒子中水平且垂直居中 */
            /* 方法一： */
            position: absolute;
            /* top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px; */
            /* 方法二 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

</html>

2.2d旋转

transform：rotate（）括号里单位是deg

旋转默认中心点是盒子中央，可以自己设置中心点 transform-orgin：left center right top center bottom 也可以跟具体的px 也可以跟百分比

案例：利用旋转制作箭头方法分析：给盒子下边框和有边框，让盒子顺时针旋转45deg 就做到了三角

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        div {
            position: relative;
            width: 269px;
            height: 30px;
            border: 2px solid #000;
        }

        div::after {
            content: "";
            position: absolute;
            top: 5px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 2px solid #000;
            border-bottom: 2px solid #000;
            transform: rotate(45deg);
            transition: all .3s;
        }

        div:hover::after {
            transform: rotate(-135deg);
            top: 10px;
        }
    </style>
</head>

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

</html>

3.2d缩放

transform：scale（）

括号里的值大于1是放大，小于1是缩小也可以设置中心点

案例：实现图片的缩放。

小要点：要实现好看的动画效果，可以给盒子加overflow-hidden 这样会更加好看还可以自己设定放大的中心点与旋转一样。

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        .box {
            overflow: hidden;
            width: 300px;
            height: 300px;
            border-radius: 50%;

        }

        img {

            width: 100%;
            height: 100%;
            transition: all .5s;
            transform-origin: 220px 230px;
        }

        .box:hover img {
            transform: scale(3);

        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/temps_2.jpg" alt="">
    </div>
</body>

</html>

4.动画

第一步：先定义动画

第二步：使用动画

定义动画：@keyfroms+动画名称{

}

括号里可以写百分比也可以写form+to

调用动画：animation: name duration timing-function delay iteration-count direction fill-mode;

animation：名字持续时间速度曲线延时循环次数是否反向移动是否停止在最后状态

特别记忆：infinite 循环播放 forwards 保持最后状态速度曲线中有一个 steps（）步长，用几步完成动画

案例：大数据热点图案例

案例分析：要实现要求的波纹效果，首先应该考虑将盒子放在同一位置，可以给边框，但是不好看，所以考虑给盒子阴影，这样在定义动画时，改变盒子的宽高，就会是的阴影变大。

细节方面，注意阴影效果是在慢慢变浅，所以添加透明度效果。

波纹有先后之分，所以重点利用的是delay属性

<!DOCTYPE html>
<html lang="zh-CN">

<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 {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(./images/map.png) no-repeat;
            margin: 0 auto;
        }

        div[class^="city"] {
            position: absolute;
            top: 228px;
            right: 196px;
        }

        .map .city-tb {
            top: 498px;
            right: 82px;
        }

        .map .city-gz {
            top: 542px;
            right: 196px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #27ba9b;
        }

        div[class^="city"] div[class^="bw"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0px 0px 15px #27ba9b;
            border-radius: 50%;
        }

        .bw1 {
            animation: bowen 1.4s linear 0s infinite;
        }

        .bw2 {
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: bowen 1.4s linear .4s infinite;

        }

        .bw3 {
            animation: bowen 1.4s linear .8s infinite;
        }

        /* 定义动画 */
        @keyframes bowen {
            0% {
                width: 8px;
                height: 8px;
                opacity: 1;
            }

            50% {
                width: 30px;
                height: 30px;
                /* transform: scale(5); */
                opacity: 1;
            }

            100% {
                width: 60px;
                height: 60px;

                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city-bj">
            <div class="dotted"></div>
            <div class="bw1"></div>
            <div class="bw2"></div>
            <div class="bw3"></div>
        </div>
        <div class="city-tb">
            <div class="dotted"></div>
            <div class="bw1"></div>
            <div class="bw2"></div>
            <div class="bw3"></div>
        </div>
        <div class="city-gz">
            <div class="dotted"></div>
            <div class="bw1"></div>
            <div class="bw2"></div>
            <div class="bw3"></div>
        </div>
    </div>
</body>

</html>

steps动画：奔跑的北极熊

案例分析：图片长度为1600px 每一个图案宽高都为200px，所以只需要设置step步长为8步完成即可

案例补充：添加了背景动画的移动，北极熊的奔跑，以及北极熊从屏幕左边移动到屏幕中央的动画。

本案例，一共制作了三个动画，练习此案例，帮助掌握速度曲线，是否循环，以及保留最后状态。

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        body {
            /* background: url(./images/bj.webp) repeat; */
            /* background: -webkit-linear-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); */
            background: -webkit-linear-gradient(left, rgb(218, 102, 7), rgb(187, 65, 9), rgb(208, 107, 0))
        }

        .box {
            z-index: 5;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200px;
            height: 100px;
            /* margin: 0 auto; */
            background: url(./images/bear.png) no-repeat;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* 元素添加多个动画，要用逗号隔开 */
            /* forwards 是保持最后状态，停留在最后的位置 */
            animation: move 1s steps(8) infinite, run 2s linear forwards;
        }

        @keyframes move {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes run {
            0% {}

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .bg-hei {
            z-index: 2;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 569px;
            background: url(./images/bg2.png) repeat-x;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: dong 10s linear infinite;
        }

        .bg-bai {
            z-index: 4;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 336px;
            background: url(./images/bg1.png) repeat-x;
            animation: dong 10s linear infinite;
        }

        @keyframes dong {
            100% {
                background-position: -3840px 0;
            }
        }

        .son {
            position: absolute;
            top: 20px;
            right: 100px;
            width: 150px;
            height: 150px;
            /* background: -webkit-linear-gradient(left, yellow, green); */
            background: url(./images/bj.webp) no-repeat center;
            border-radius: 50%;
        }
    </style>

</head>

<body>
    <div class="bg-hei"></div>
    <div class="bg-bai"></div>
    <div class="box"></div>
    <div class="son"></div>
</body>

</html>