移动web(动画)

衔钰

于 2022-07-18 21:14:03 发布

阅读量109

点赞数 1

分类专栏： css基础知识文章标签：前端动画 css3 html 青少年编程

本文链接：https://blog.csdn.net/luzixi/article/details/125860333

版权

css基础知识专栏收录该内容

7 篇文章 1 订阅

订阅专栏

动画css结构

/* 2.调用动画 */

animation: move 2s linear infinite;

/* linear匀速 */

/* infinite重复 */

}

/* 1.定义一个动画 @keyframes 动画名 {} */

@keyframes move {

/* from来着哪里 */

from{

transform: translate(0,0);

}

/* to 去往哪里 */

to{

transform: translate(1000px,0);

}

补间动画和逐帧动画

就我理解:逐帧就是一卡一卡,一帧帧的

steps(12)意思是十二帧

<style>
    .box{
        width: 140px;
        height: 140px;
        background-image: url(./bg.png);
        animation: run 1s infinite steps(12),
                   move 2s linear;

    }
    @keyframes run {
        0%{
            transform: translate(0,0);
        }
        100%{
            background-position:-1680px 0;
        }
        
    }
    @keyframes move {
        0%{
            transform: translate(0,0);
        }
        100%    {
            transform: translate(800px,0) rotate(100turn);
        }
        
    }
</style>
<body>
    <div class="box"></div>
</body>