动画

2023-12-29 19:46:40

变形(transform)

定义

在CSS中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

四种变形

旋转

使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。

缩放

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

transform：scale（0.5）；（缩小一半）

注：可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率

transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。

倾斜

使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。

注：只使用一个参数，省略另一个参数

transform：skew（30deg）；（这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜）

移动

使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

transform：translate（50px，50px）；//水平方向上移动50px，垂直方向上移动50px

注：只使用一个参数，省略另一个参数

transform：translate（50px）；（这种情况下视为只在水平方向上移动，垂直方向上不移动。）

对一个元素使用多种变形的方法

transform：translate（100px，200px）rotate（45deg）scale（1.5）；

#div1{
            width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto 0;
            /*transform: translate(100px,200px);*/
            /*transform: rotate(45deg);*/
            transform: scale(1.5);
            /*:左边属性，右边属性值；*/
            /*若三个全显示，用空格隔开*/

        }

动画（animation）

八大属性

animation-name 检索或设置对象所应用的动画名称

必须与规则@keyframes配合使用

animation-duration 检索或设置对象动画的持续时间

animation-duration:3s; 动画完成使用的时间为3s

animation-timing-function 检索或设置对象动画的过渡类型

linear：线性过渡（匀速）

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再到慢

animation-delay 检索或设置对象动画延迟的时间

animation-delay:0.5s; 动画开始前延迟的时间为0.5s

animation-iteration-count 检索或设置对象动画的循环次数

infinite：无限循环

number: 循环的次数

6.animation-direction 检索或设置对象动画在循环中是否反向运动

normal：正常方向

reverse：反方向运行

alternate：动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-play-state 检索或设置对象动画的状态

running:运动

paused: 暂停（当鼠标经过时动画停止，鼠标移开动画继续执行）

animation-fill-mode 检索或设置对象动画时间之外的状态

none:默认值，不设置对象动画之外的状态

forwards:设置对象状态为动画结束时的状态

backwards:设置对象状态为动画开始时的状态

both:设置对象状态为动画开始或结束时的状态

动画调用也可以采用连写方式

animation: name duration timing-function delay iteration-count direction;

@keyframes zhuan {
            from{transform: rotate(0)}
            to{transform: rotate(360deg)}
        }
        #box{
            width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto 0;
            animation: zhuan 5s linear 2s 5;
        }
        /*linear后时间表示延时，数字表示次数
        */
        /*infinite不停止无限的*/
        /*linear 匀速*/
        /*ease-in 由快到慢*/
        /*ease-out 由慢到快*/

实例（摩天轮）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes zhuan {
            from{transform: rotate(0)}
            to{transform: rotate(360deg)}
        }
        @keyframes fanZhuan {
            from{transform: rotate(360deg)}
            to{transform: rotate(0)}
        }
        #boxL {
            width: 600px;
            height: 600px;
            margin: 100px auto 0;
            background: url("img/a.png");
            background-size: 100% 100%;
            position: relative;
            animation: zhuan 10s linear infinite;
        }
        #boxL>img{
            position: absolute;
            width: 100px;
            animation: fanZhuan 10s linear infinite;
            transform-origin: 50% 2%;
        }
        #boxL>img:nth-child(1){
            left: 250px;
            top: 10px;

        }
    </style>
</head>
<body>
<div id="boxL">
    <img src="./img/4.png" alt="">
</div>

</body>
</html>

码农公寓