帧动的使用animation(动画)

最新推荐文章于 2021-05-03 15:08:55 发布

leigangg

最新推荐文章于 2021-05-03 15:08:55 发布

阅读量258

点赞数 1

本文链接：https://blog.csdn.net/leigangg/article/details/104396329

版权

帧东的使用:

1.帧动的意思是在一个操作中可以让画面可以移动多个帧.让画面实现多动画效果
帧动,让一个图片移动到另一个位置.这叫一帧,然后在移动到另外一个位置,那么一共就移动了两帧.
要想让图片实现帧动效果用transform:translate(100px);和transition:transfom 1s ease;再配合hover等等事件就可以实现,
具体代码:

    <style>
        .box{
            height: 100px;
            width: 100px;
            background-color: #f00;
            transition: transform 1s ease;
        }
        .box:hover{
            transform: translate(300px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

代码效果:

原来的位置
在这里插入图片描述
移动后的位置:

2.那么我们怎么实现多帧动态效果呢,
代码如下:

    <style>
        .box{
            height: 100px;
            width: 100px;
            background-color: #f00;
        }
        .box:hover{
            animation: test1 3s ease-in;
            
        }
        @keyframes test1{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(300px,0);
            }
            50%{
                transform: translate(300px,300px);
            }
            75%{
                transform: translate(0,300px);
            }
            100%{
                transform: translate(0,0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

代码效果:
在这里插入图片描述
我们通过给@keyframs给test1设置了五种状态.也就是说当鼠标放上去的时候,图片会移动5次.移动的顺序如图的1-2-3-4-然后在回到原来的位置.
3.当然我呢也可以实现的多个动画一起执行
具体代码:

    <style>
        .box{
            height: 100px;
            width: 100px;
            background-color: #f00;
        }
        .box:hover{
            animation: test1 3s ease-in;
            
        }
        @keyframes test1{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(300px,0) rotate(99999deg);
            }
            50%{
                transform: translate(300px,300px) rotate(999999999999deg);
            }
            75%{
                transform: translate(0,300px) rotate(99999deg);
            }
            100%{
                transform: translate(0,0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

代码效果:
在这里插入图片描述
同样的我们通过给test1里面的transform属性设置旋转效果,那么就可以实现多个动画一起实现,注意:多个效果中间用空格隔开,

leigangg

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
帧动的使用animation(动画)

帧东的使用:帧动的意思是在一个操作中可以让画面可以移动多个帧.让画面实现多动画效果帧动,让一个图片移动到另一个位置.这叫一帧,然后在移动到另外一个位置,那么一共就移动了两帧.要想让图片实现帧动效果用transform:translate(100px);和transition:transfom 1s ease;再配合hover等等事件就可以实现,具体代码: <style>...
复制链接

扫一扫