CSS3之2D转换，动画

转换transform 我们简单理解就是变形有2D和3D之分我们暂且学了三个分别是位移旋转和缩放2D移动最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y)2D旋转rotate(度数)可以实现旋转元素度数的单位是deg2D缩放sacle(x，y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子设置转换

南街听风€

998人浏览 · 2024-02-26 20:00:28

南街听风€ · 2024-02-26 20:00:28 发布

一.2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

1.1 二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

1.2 2D转换之移动translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

语法：

transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);

重点：

定义2D转换中的移动，沿着x和y轴移动元素
translate最大的优点：不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果

1.3 2D转换之旋转rotate

2D旋转指的是让元素在2维平面内顺时针或逆时针旋转

语法：

transform:rotate(度数)

重点：

rotate里面跟度数，单位是deg 比如 rotate(45deg)
角度为正时，顺时针，负时，逆时针
默认旋转的中心点是元素的中心点

1.4 2D转换中心点transform-origin

可以设置元素的中心点

语法：

transform-origin:x y;

重点：

注意后面的参数x和y用空格分开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）

1.5 2D转换之缩放scale

给元素添加上这个属性就能控制它放大还是缩小

语法：

transform:scale(x,y);

注意：

注意其中的x和y用逗号分隔
transform:scale(1,1)；宽和高都放大了一倍，相当于没有放大
transform:scale(2,2)；宽和高都放大了2倍
transform:scale(2)； 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2);
transform:scale(0.5,0.5)；缩小
scale缩小最大的优势：可以设置转换中心点缩小，默认以中心点缩放的，而且不影响其他盒子

1.6 2D转换综合写法

注意：

同时使用多个转换，其格式为：transform:translate()rotate()scale()… 等
其顺序会影响转换的效果
当我们同时有位移和其他属性的时候，要将位移放到最前

1.7 2D 转换总结

转换transform 我们简单理解就是变形有2D和3D之分
我们暂且学了三个分别是位移旋转和缩放
2D移动translate(x，y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y)
2D旋转rotate(度数)可以实现旋转元素度数的单位是deg
2D缩放sacle(x，y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子
设置转换中心点transform-origin:x y;参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

二、CSS3 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

2.1 动画的基本使用

制作动画分为两步：

先定义动画
再使用（调用）动画

2.1.1 用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
0% {
		width: 200px;
	}
100% {
		width:200px;
	}
}

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%

2.1.2 元素使用动画

div {
    width:200px;
    height:200px;
    background-color:aqua;
    margin:100px auto;
    调用动画
    animation-name:动画名称；
    持续时间
    animation-duration:持续时间
}

2.2 动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state
animation-name	规定动画名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是ease
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是normal,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是running,还有paused
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

2.3 动画简写属性

animation ：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束状态

animation：myfirst 5s linear 2s infinite alternate

动画名称持续时间一定要写

注意：

简写属性里面不包含 animation-play-state
暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来,而不是直接跳回来:animation-direction : alternate
盒子动画结束后,停在结束位置: animation-fill-mode : forwards

案例——热点图案例

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

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

        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }

        .tb {
            top: 500px;
            right: 80px;
        }

        .gz {
            top: 544px;
            right: 195px;
        }

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

        .city div[class^="pulse"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            animation: pulse 1.2s linear infinite;
        }

        .city div .pulse2 {
            animation-delay: 0.4s;
        }

        .city div.pulse3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}

            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
        <div class="city gz">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

</html>

2.4 速度曲线细节

animation-timing-function：规定动画的曲线，默认是“ease”

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认。动画从低速开始，然后加快，在结束前变慢
ease-in	动画以低俗开始
ease-out	动画以低俗结束
ease-in-out	动画以低俗开始和结束
steps（）	指定了时间函数中的间隔数量（步长）

案例——奔跑的熊大

<!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>
        body {
            background-color: #ccc;
        }

        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画。用逗号分隔 */
            animation: bear 1s steps(8) infinite, move 3s forwards;
        }

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

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

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>

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

</html>

有不完整和有误的地方欢迎各位小伙伴指正，一起学习！