首页 > 其他分享> 文章详细

动画

2021-11-14 20:31:38 阅读：126 来源： 互联网

标签：动画 rotate transform animation 设置方向

变形(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>

标签：动画,rotate,transform,animation,设置,方向
来源： https://www.cnblogs.com/fqwwyx/p/15553152.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动画