CSS3动画实现奔跑的大熊案例（文章底部附素材）

m0_62923580

已于 2022-04-26 16:20:20 修改

阅读量198

点赞数

文章标签： css3

于 2022-04-24 18:41:49 首次发布

本文链接：https://blog.csdn.net/m0_62923580/article/details/124389260

版权

利用css3动画实现大熊奔跑的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #ccc;
        }
       div {
           position: absolute;
           left: 0;
           width: 200px;
           height: 100px;
           background: url(images/2021062213205624.png); 
           animation:bear  1s steps(8) infinite, move 4s forwards;          
       }
       @keyframes bear {
           0% {
               background-position: 0 0;
           }
           100% {
               background-position: -1600px 0;
           }
       }
       @keyframes move {
           0% {
            left: 0;
           }
           100% {
              left: 50%;
              /* margin-left: -100px; */
              transform: translate(-50px);
           }
       }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

素材

m0_62923580

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画实现奔跑的大熊案例（文章底部附素材）

利用css3动画实现大熊奔跑的动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫