变形实例2

最新推荐文章于 2019-05-12 23:09:02 发布

ztt0918

最新推荐文章于 2019-05-12 23:09:02 发布

阅读量234

点赞数

文章标签：变形效果

本文链接：https://blog.csdn.net/ztt0918/article/details/71908176

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    img{
        transform: scale(0.4);
        animation: plane 4s ease-in-out 0.1s 2 alternate;
    }
    @keyframes plane {
        0%{
            transform: translate(0px ,0px);
        }
        20% {
            transform: translate(200px, 200px);
        }
            40%{
                transform: translate(400px,100px);
            }
        60%{
            transform: translate(600px,400px);
        }
        80%{
            transform: translate(800px,300px);
        }
        100%{
            transform: translate(1000px 500px);
        }
        }
</style>
<body>
<img src="../img/plane_1.jpg" alt=""/>
</body>
</html>