CSS animation

最新推荐文章于 2024-05-13 15:14:44 发布

calangan

最新推荐文章于 2024-05-13 15:14:44 发布

阅读量2w

点赞数

分类专栏： web 文章标签： css 动画

本文链接：https://blog.csdn.net/calangan/article/details/72935460

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS animation

使用CSS animation实现http://xujin.org/网页中猴子动的效果，下面会给出可爱猴子照片
上面图片中详细介绍了animation样式
下面给出让可爱猴子动的代码

<!DOCTYPE html>
<html>
    <head>
        <title>robot</title>
        <style type="text/css">
            @-webkit-keyframes **mashape-ape-animation** {
              0% {
                background-position: 0% 0%;
              }
              100% {
                background-position: 200% 0%;
              }
            }  
            div{
                width: 240px;
                height:250px;
                background-image:url('./ape-sprite.png');
                background-size: 200% auto;
                background-repeat: no-repeat;
                background-position: 0px 0px;
                animation:**mashape-ape-animation** 0.4s steps(2) infinite;
                animation-play-state: running;              
            }
        </style>
    </head>
    <body>
        <div style=""></div>
    </body>
</html>