雪碧图米兔练习

2021/10/3 23:41:08

编程Tag： 动画 infinite 雪碧图 run animation background 练习 steps

本文主要是介绍雪碧图米兔练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

米兔动画练习

素材图片

<!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>米兔动画</title>

    <style>

•    .box1{

•      width: 132px;

•      height: 271px;

•      margin: 0 *auto*;

•      background-image: url(./img/米兔.png);

•      animation: run 1s steps(4) *infinite*;

•    }



•    @keyframes run{

•      from{

•        background-position: 0 0;

•      }

•      to{

•        background-position: -528px 0;

•      }

•    }

  </style>

•    

</head>

<body>

    <div class="box1"></div>

</body>

</html>

infinite 无穷（使动画连续起来）

steps（n）有几张图片 n就代表几，是动画连贯，不然会像一组图片横向播放，看起来很不舒服de！

animation 呈现动画效果

这篇关于雪碧图米兔练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

雪碧图米兔练习

米兔动画练习

infinite 无穷（使动画连续起来）

steps（n）有几张图片 n就代表几，是动画连贯，不然会像一组图片横向播放，看起来很不舒服de！

相关编程文章